From c8c6be968fcbb86ea066027d2cb4d4ec078f1a36 Mon Sep 17 00:00:00 2001 From: gpolychronisAmadeus <54309994+gpolychronisAmadeus@users.noreply.github.com> Date: Mon, 2 Dec 2019 09:41:15 +0100 Subject: [PATCH] demo(datepicker): add custom date parser/formatter demo (#3451) Closes #3417 --- .../datepicker/datepicker.module.ts | 2 +- .../demos/adapter/datepicker-adapter.html | 12 ++- .../demos/adapter/datepicker-adapter.ts | 80 +++++++++++++++++-- .../datepicker-overview.component.html | 14 +++- 4 files changed, 94 insertions(+), 14 deletions(-) diff --git a/demo/src/app/components/datepicker/datepicker.module.ts b/demo/src/app/components/datepicker/datepicker.module.ts index 92911bd424..ce6a34b19c 100644 --- a/demo/src/app/components/datepicker/datepicker.module.ts +++ b/demo/src/app/components/datepicker/datepicker.module.ts @@ -90,7 +90,7 @@ const DEMOS = { markup: require('!!raw-loader!./demos/disabled/datepicker-disabled.html').default }, adapter: { - title: 'Custom date adapter', + title: 'Custom date adapter and formatter', type: NgbdDatepickerAdapter, code: require('!!raw-loader!./demos/adapter/datepicker-adapter').default, markup: require('!!raw-loader!./demos/adapter/datepicker-adapter.html').default diff --git a/demo/src/app/components/datepicker/demos/adapter/datepicker-adapter.html b/demo/src/app/components/datepicker/demos/adapter/datepicker-adapter.html index d9d9c90e20..b2f7a94724 100644 --- a/demo/src/app/components/datepicker/demos/adapter/datepicker-adapter.html +++ b/demo/src/app/components/datepicker/demos/adapter/datepicker-adapter.html @@ -1,6 +1,10 @@ -
These datepickers use custom Date adapter that lets you use your own model implementation. -In this example we are converting from and to a JS native Date object
- +These datepickers use custom date adapter and formatter.
+ The custom NgbDateAdapter
lets you use your own model i.e. the structure of ngModel.
+ The custom NgbDateParserFormatter
lets you use your own formatter or parser i.e. the date format in input field.
+
+
+ Notice that there are two different services: the NgbDateAdapter
and the NgbDateParserFormatter
.