fix(datepicker): date fns date format

package.json

@@ -97,7 +97,7 @@
     "bootstrap": "4.0.0",
     "colors.js": "1.2.4",
     "core-js": "2.5.7",
-    "date-fns": "^2.0.0-alpha.16",
+    "date-fns": ">=2.0.0-alpha.16 <=2.0.0-alpha.27",
     "docsearch.js": "^2.5.2",
     "gulp-bump": "2.7.0",
     "highlight.js": "9.12.0",

scripts/gulp/tasks/bundle/rollup-config.ts

@@ -34,6 +34,7 @@ const ROLLUP_GLOBALS = {
   // date libs for date service
   'moment': 'moment',
   'date-fns/parse': 'date-fns.parse',
+  'date-fns/format': 'date-fns.format',
 
   // @nebular dependencies
   '@nebular/theme': 'nb.theme',

src/framework/date-fns/date-fns.module.ts

@@ -4,14 +4,34 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 
-import { NbDateService } from '@nebular/theme';
-import { NbDateFnsDateService } from './services/date-fns-date.service';
+import { NB_DATE_SERVICE_OPTIONS, NbDateService } from '@nebular/theme';
+import { NbDateFnsOptions, NbDateFnsDateService } from './services/date-fns-date.service';
 
+const dateFnsServiceProvider = { provide: NbDateService, useClass: NbDateFnsDateService };
 
 @NgModule({
-  providers: [{ provide: NbDateService, useClass: NbDateFnsDateService }],
+  providers: [ dateFnsServiceProvider ],
 })
 export class NbDateFnsDateModule {
+  static forRoot(options: Partial<NbDateFnsOptions>): ModuleWithProviders {
+    return {
+      ngModule: NbDateFnsDateModule,
+      providers: [
+        dateFnsServiceProvider,
+        { provide: NB_DATE_SERVICE_OPTIONS, useValue: options },
+      ],
+    };
+  }
+
+  static forChild(options: Partial<NbDateFnsOptions>): ModuleWithProviders {
+    return {
+      ngModule: NbDateFnsDateModule,
+      providers: [
+        dateFnsServiceProvider,
+        { provide: NB_DATE_SERVICE_OPTIONS, useValue: options },
+      ],
+    };
+  }
 }

src/framework/date-fns/package.json

@@ -25,6 +25,6 @@
   ],
   "peerDependencies": {
     "@nebular/theme": "3.2.1",
-    "date-fns": "^2.0.0-alpha.16"
+    "date-fns": ">=2.0.0-alpha.16 <=2.0.0-alpha.27"
   }
 }

src/framework/date-fns/services/date-fns-date.service.spec.ts

@@ -11,17 +11,66 @@ import { NbDateService } from '@nebular/theme';
 
 import { NbDateFnsDateService } from './date-fns-date.service';
 
-
 describe('date-fns-date-service', () => {
   let dateService: NbDateService<Date>;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
-    dateService = new NbDateFnsDateService(TestBed.get(LOCALE_ID));
+    dateService = new NbDateFnsDateService(TestBed.get(LOCALE_ID), null);
   });
 
   it('should parse date according to the MM.dd.yyyy format', () => {
     const date = '06.15.2018';
     expect(dateService.parse(date, 'MM.dd.yyyy')).toEqual(new Date(2018, 5, 15));
   });
+
+  describe('service global config', () => {
+    const SEPARATOR = '_';
+    const FORMAT = `MM${SEPARATOR}dd${SEPARATOR}yyyy`;
+    const year = 2010;
+    const monthIndex = 10;
+    const month = monthIndex + 1;
+    const day = 20;
+    const date = new Date(year, monthIndex, day);
+    const formattedDate = `${month}${SEPARATOR}${day}${SEPARATOR}${year}`;
+
+    beforeEach(() => {
+      dateService = new NbDateFnsDateService(
+        TestBed.get(LOCALE_ID),
+        {
+          format: FORMAT,
+          parseOptions: { awareOfUnicodeTokens: true },
+          formatOptions: { awareOfUnicodeTokens: true },
+        },
+      );
+    });
+
+    it('should use format from global config if isn\'t passed as parameter', () => {
+      expect(dateService.format(date, undefined)).toEqual(formattedDate);
+
+      const parsedDate = dateService.parse(formattedDate, FORMAT);
+      expect(parsedDate.valueOf()).toEqual(date.valueOf());
+    });
+
+    it('should use parameter over global config format if presented', () => {
+      expect(dateService.format(date, undefined)).toEqual(formattedDate);
+
+      const parsedDate = dateService.parse(formattedDate, FORMAT);
+      expect(parsedDate.valueOf()).toEqual(date.valueOf());
+    });
+
+    it('should pass parseOptions to parse function', () => {
+      // date-fns require { awareOfUnicodeTokens: true } option to be passed to parse function
+      // when format contains 'DD' or 'YYYY' tokens, otherwise it throws. This option is
+      // passed as global config to service constructor so it shouldn't throw.
+      expect(() => dateService.parse(formattedDate, 'DD/MM/YYYY')).not.toThrow();
+    });
+
+    it('should pass formatOptions to format function', () => {
+      // date-fns require { awareOfUnicodeTokens: true } option to be passed to format function
+      // when format contains 'DD' or 'YYYY' tokens, otherwise it throws. This option is
+      // passed as global config to service constructor so it shouldn't throw.
+      expect(() => dateService.format(date, 'DD/MM/YYYY')).not.toThrow();
+    });
+  });
 });

src/framework/date-fns/services/date-fns-date.service.ts

@@ -4,26 +4,45 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Inject, Injectable, LOCALE_ID } from '@angular/core';
+import { Inject, Injectable, LOCALE_ID, Optional } from '@angular/core';
 
-import { NbNativeDateService } from '@nebular/theme';
+import { NB_DATE_SERVICE_OPTIONS, NbNativeDateService } from '@nebular/theme';
 
 import * as dateFnsParse from 'date-fns/parse';
 // @ts-ignore
-import { default as rollupParse} from 'date-fns/parse';
+import { default as rollupParse } from 'date-fns/parse';
+import * as dateFnsFormat from 'date-fns/format';
+// @ts-ignore
+import { default as rollupFormat } from 'date-fns/format';
 
 const parse = rollupParse || dateFnsParse;
+const formatDate = rollupFormat || dateFnsFormat;
 
+export interface NbDateFnsOptions {
+  format: string;
+  parseOptions: {},
+  formatOptions: {},
+}
 
 @Injectable()
 export class NbDateFnsDateService extends NbNativeDateService {
-  constructor(@Inject(LOCALE_ID) locale: string) {
+  protected options: Partial<NbDateFnsOptions>;
+
+  constructor(
+    @Inject(LOCALE_ID) locale: string,
+    @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) options,
+  ) {
     super(locale);
     this.setLocale(locale);
+    this.options = options || {};
+  }
+
+  format(date: Date, format: string): string {
+    return formatDate(date, format || this.options.format, this.options.formatOptions);
   }
 
   parse(date: string, format: string): Date {
-    return parse(date, format, new Date());
+    return parse(date, format || this.options.format, new Date(), this.options.parseOptions);
   }
 
   getId(): string {

src/framework/theme/components/datepicker/datepicker.component.ts

@@ -16,9 +16,13 @@ import {
   OnDestroy,
   Output,
   Type,
+  AfterViewInit,
+  OnInit,
+  SimpleChanges,
+  Optional,
 } from '@angular/core';
 import { takeWhile } from 'rxjs/operators';
-import { Observable, Subject } from 'rxjs';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
 
 import {
   NbAdjustableConnectedPositionStrategy,
@@ -43,13 +47,15 @@ import {
   NbCalendarViewMode,
   NbDateService,
 } from '../calendar-kit';
-import { NbDatepicker, NbPickerValidatorConfig } from './datepicker.directive';
+import { NB_DATE_SERVICE_OPTIONS, NbDatepicker, NbPickerValidatorConfig } from './datepicker.directive';
 
 
 /**
  * The `NbBasePicker` component concentrates overlay manipulation logic.
  * */
-export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements OnChanges, OnDestroy {
+export abstract class NbBasePicker<D, T, P>
+                extends NbDatepicker<T>
+                implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   /**
    * Datepicker date format. Can be used only with date adapters (moment, date-fns) since native date
    * object doesn't support formatting.
@@ -139,6 +145,8 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements O
    * */
   protected hostRef: ElementRef;
 
+  protected init$: ReplaySubject<void> = new ReplaySubject<void>();
+
   /**
    * Stream of picker changes. Required to be the subject because picker hides and shows and picker
    * change stream becomes recreated.
@@ -156,7 +164,7 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements O
    * Queue contains the last value that was applied to the picker when it was hidden.
    * This value will be passed to the picker as soon as it shown.
    * */
-  protected queue: T;
+  protected queue: T | undefined;
 
   protected blur$: Subject<void> = new Subject<void>();
 
@@ -166,6 +174,7 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements O
               protected overlay: NbOverlayService,
               protected cfr: ComponentFactoryResolver,
               protected dateService: NbDateService<D>,
+              @Optional() @Inject(NB_DATE_SERVICE_OPTIONS) protected dateServiceOptions,
   ) {
     super();
   }
@@ -188,6 +197,10 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements O
     return this.ref && this.ref.hasAttached();
   }
 
+  get init(): Observable<void> {
+    return this.init$.asObservable();
+  }
+
   /**
    * Emits when datepicker looses focus.
    */
@@ -197,18 +210,24 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements O
 
   protected abstract get pickerValueChange(): Observable<T>;
 
-  ngOnChanges() {
-    if (this.dateService.getId() === 'native' && this.format) {
-      throw new Error('Can\'t format native date. To use custom formatting you have to install @nebular/moment or ' +
-      '@nebular/date-fns package and import NbMomentDateModule or NbDateFnsDateModule accordingly.' +
-      'More information at "Formatting issue" ' +
-      'https://akveo.github.io/nebular/docs/components/datepicker/overview#nbdatepickercomponent');
+  ngOnInit() {
+    this.checkFormat();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.format && !changes.format.isFirstChange()) {
+      this.checkFormat();
     }
   }
 
+  ngAfterViewInit() {
+    this.init$.next();
+  }
+
   ngOnDestroy() {
     this.alive = false;
     this.hide();
+    this.init$.complete();
 
     if (this.ref) {
       this.ref.dispose();
@@ -328,6 +347,20 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements O
     this.picker.size = this.size;
     this.picker.visibleDate = this.visibleDate;
   }
+
+  protected checkFormat() {
+    if (this.dateService.getId() === 'native' && this.format) {
+      throw new Error('Can\'t format native date. To use custom formatting you have to install @nebular/moment or ' +
+        '@nebular/date-fns package and import NbMomentDateModule or NbDateFnsDateModule accordingly.' +
+        'More information at "Formatting issue" ' +
+        'https://akveo.github.io/nebular/docs/components/datepicker/overview#nbdatepickercomponent');
+    }
+
+    const isFormatSet = this.format || (this.dateServiceOptions && this.dateServiceOptions.format);
+    if (this.dateService.getId() === 'date-fns' && !isFormatSet) {
+      throw new Error('format is required when using NbDateFnsDateModule');
+    }
+  }
 }
 
 /**
@@ -355,8 +388,8 @@ export class NbDatepickerComponent<D> extends NbBasePicker<D, D, NbCalendarCompo
     return this.valueChange as EventEmitter<D>;
   }
 
-  get value(): D {
-    return this.picker.date;
+  get value(): D | undefined {
+    return this.picker ? this.picker.date : undefined;
   }
 
   set value(date: D) {
@@ -405,8 +438,8 @@ export class NbRangepickerComponent<D> extends NbBasePicker<D, NbCalendarRange<D
     return this.valueChange as EventEmitter<NbCalendarRange<D>>;
   }
 
-  get value(): NbCalendarRange<D> {
-    return this.picker.range;
+  get value(): NbCalendarRange<D> | undefined {
+    return this.picker ? this.picker.range : undefined;
   }
 
   set value(range: NbCalendarRange<D>) {
@@ -426,7 +459,7 @@ export class NbRangepickerComponent<D> extends NbBasePicker<D, NbCalendarRange<D
   }
 
   shouldHide(): boolean {
-    return super.shouldHide() && !!(this.value.start && this.value.end);
+    return super.shouldHide() && !!(this.value && this.value.start && this.value.end);
   }
 
   protected writeQueue() {