demo(datepicker): add custom date parser/formatter demo (ng-bootstrap…

…#3451)

Closes ng-bootstrap#3417

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

demo/src/app/components/datepicker/demos/adapter/datepicker-adapter.html

@@ -1,6 +1,10 @@
-<p>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</p>
-
+<p>These datepickers use custom date adapter and formatter.
+  The custom <code>NgbDateAdapter</code> lets you use your own model i.e. the structure of ngModel.
+  The custom <code>NgbDateParserFormatter</code> lets you use your own formatter or parser i.e. the date format in input field.
+<br/>
+<br/>
+  Notice that there are <strong>two</strong> different services: the <code>NgbDateAdapter</code> and the <code>NgbDateParserFormatter</code>.</p>
+<br/>
 <div class="row">
   <div class="col-6">
     <ngb-datepicker #d1 [(ngModel)]="model1" #c1="ngModel"></ngb-datepicker>
@@ -17,7 +21,7 @@
     <form class="form-inline">
       <div class="form-group">
         <div class="input-group">
-          <input class="form-control" placeholder="yyyy-mm-dd"
+          <input class="form-control" placeholder="dd/mm/yyyy"
                  name="d2" #c2="ngModel" [(ngModel)]="model2" ngbDatepicker #d2="ngbDatepicker">
           <div class="input-group-append">
             <button class="btn btn-outline-secondary calendar" (click)="d2.toggle()" type="button"></button>

demo/src/app/components/datepicker/demos/adapter/datepicker-adapter.ts

@@ -1,20 +1,90 @@
 import {Component, Injectable} from '@angular/core';
-import {NgbDateAdapter, NgbDateStruct, NgbDateNativeAdapter} from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbCalendar,
+  NgbDateAdapter,
+  NgbDateStruct,
+  NgbDateParserFormatter
+} from '@ng-bootstrap/ng-bootstrap';
+
+/**
+ * This Service handles how the date is represented in scripts i.e. ngModel.
+ */
+@Injectable()
+export class CustomAdapter extends NgbDateAdapter<string> {
+
+  readonly DELIMITER = '-';
+
+  fromModel(value: string): NgbDateStruct {
+    let result: NgbDateStruct = null;
+    if (value) {
+      let date = value.split(this.DELIMITER);
+      result = {
+        day : parseInt(date[0], 10),
+        month : parseInt(date[1], 10),
+        year : parseInt(date[2], 10)
+      };
+    }
+    return result;
+  }
+
+  toModel(date: NgbDateStruct): string {
+    let result: string = null;
+    if (date) {
+      result = date.day + this.DELIMITER + date.month + this.DELIMITER + date.year;
+    }
+    return result;
+  }
+}
+
+/**
+ * This Service handles how the date is rendered and parsed from keyboard i.e. in the bound input field.
+ */
+@Injectable()
+export class CustomDateParserFormatter extends NgbDateParserFormatter {
+
+  readonly DELIMITER = '/';
+
+  parse(value: string): NgbDateStruct {
+    let result: NgbDateStruct = null;
+    if (value) {
+      let date = value.split(this.DELIMITER);
+      result = {
+        day : parseInt(date[0], 10),
+        month : parseInt(date[1], 10),
+        year : parseInt(date[2], 10)
+      };
+    }
+    return result;
+  }
+
+  format(date: NgbDateStruct): string {
+    let result: string = null;
+    if (date) {
+      result = date.day + this.DELIMITER + date.month + this.DELIMITER + date.year;
+    }
+    return result;
+  }
+}
 
 @Component({
   selector: 'ngbd-datepicker-adapter',
   templateUrl: './datepicker-adapter.html',
 
   // NOTE: For this example we are only providing current component, but probably
   // NOTE: you will want to provide your main App Module
-  providers: [{provide: NgbDateAdapter, useClass: NgbDateNativeAdapter}]
+  providers: [
+    {provide: NgbDateAdapter, useClass: CustomAdapter},
+    {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}
+  ]
 })
 export class NgbdDatepickerAdapter {
 
-  model1: Date;
-  model2: Date;
+  model1: string;
+  model2: string;
+
+  constructor(private ngbCalendar: NgbCalendar, private dateAdapter: NgbDateAdapter<string>) {}
 
   get today() {
-    return new Date();
+    return this.dateAdapter.toModel(this.ngbCalendar.getToday());
   }
 }

demo/src/app/components/datepicker/overview/datepicker-overview.component.html

@@ -134,17 +134,17 @@ <h4>Handling the popup</h4>
   <h4>Adapters</h4>
 
   <p>
-    You can also tell datepicker to use the native javascript date adapter (bundled with ng-bootstrap) as in the
-    <a routerLink="../examples" fragment="adapter">custom date adapter example</a>. For now
-    the adapter works only for the form integration, so for instance <code>(ngModelChange)</code>
+    You can also tell datepicker to use the native JavaScript date adapter (bundled with ng-bootstrap).
+    For now the adapter works only for the form integration, so for instance <code>(ngModelChange)</code>
     will return a native date object. All other APIs continue to use <code>NgbDateStruct</code>.
   </p>
 
   <ngbd-code [snippet]="snippets.nativeAdapter"></ngbd-code>
 
   <p>
     You can also create your own adapters if necessary by extending and implementing the
-    <code>NgbDateAdapter</code> methods.
+    <code>NgbDateAdapter</code> methods, as in
+    <a routerLink="../examples" fragment="adapter">custom date adapter example</a>.
   </p>
 
   <ngbd-code [snippet]="snippets.adapter"></ngbd-code>
@@ -164,6 +164,12 @@ <h4>Input date parsing and formatting</h4>
     If the entered input value is invalid, the form model will contain the entered text.
   </p>
 
+  <p>
+    You can also create your own parser or formatter if necessary by extending and implementing the
+    <code>NgbDateParserFormatter</code> methods, as in
+    <a routerLink="../examples" fragment="adapter">custom date parser formatter example</a>.
+  </p>
+
 </ngbd-overview-section>