feat(datepicker): throw error when setting format for native date (#986)

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

@@ -8,6 +8,7 @@ import {
  Component,
  ComponentFactoryResolver,
  ComponentRef,
+ OnChanges,
  ElementRef,
  EventEmitter,
  Inject,
@@ -36,16 +37,23 @@ import { NbDatepickerContainerComponent } from './datepicker-container.component
 import { NB_DOCUMENT } from '../../theme.options';
 import { NbCalendarRange, NbCalendarRangeComponent } from '../calendar/calendar-range.component'
 import { NbCalendarComponent } from '../calendar/calendar.component';
-import { NbCalendarCell, NbCalendarSize, NbCalendarViewMode } from '../calendar-kit';
+import {
+ NbCalendarCell,
+ NbCalendarSize,
+ NbCalendarViewMode,
+ NbDateService,
+ NbNativeDateService,
+} from '../calendar-kit';
 import { NbDatepicker, NbPickerValidatorConfig } from './datepicker.directive';
 
 
 /**
  * The `NbBasePicker` component concentrates overlay manipulation logic.
  * */
-export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements OnDestroy {
+export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements OnChanges, OnDestroy {
  /**
- * Datepicker date format.
+ * Datepicker date format. Can be used only with date adapters (moment, date-fns) since native date
+ * object doesn't support formatting.
  * */
  @Input() format: string;
 
@@ -156,7 +164,9 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements O
  constructor(@Inject(NB_DOCUMENT) protected document,
  protected positionBuilder: NbPositionBuilderService,
  protected overlay: NbOverlayService,
- protected cfr: ComponentFactoryResolver) {
+ protected cfr: ComponentFactoryResolver,
+ protected dateService: NbDateService<D>,
+ ) {
  super();
  }
 
@@ -187,6 +197,15 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T> implements O
 
  protected abstract get pickerValueChange(): Observable<T>;
 
+ ngOnChanges() {
+ if (this.dateService instanceof NbNativeDateService && 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');
+ }
+ }
+
  ngOnDestroy() {
  this.alive = false;
  this.hide();