fix(datepicker): apply date format appropriately

Author: kimamula

src/datepicker/bs-datepicker-input.directive.ts

@@ -11,6 +11,7 @@ import { isDate, isDateValid } from '../chronos/utils/type-checks';
 import { BsDatepickerDirective } from './bs-datepicker.component';
 import { BsDatepickerConfig } from './bs-datepicker.config';
 import { BsLocaleService } from './bs-locale.service';
+import { distinctUntilChanged } from 'rxjs/operators';
 
 const BS_DATEPICKER_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR,
@@ -61,6 +62,11 @@ export class BsDatepickerInputDirective
     this._localeService.localeChange.subscribe(() => {
       this._setInputValue(this._value);
     });
+
+    // update input value on format change
+    this._picker.dateInputFormat$.pipe(distinctUntilChanged()).subscribe(() => {
+      this._setInputValue(this._value);
+    });
   }
 
   _setInputValue(value: Date): void {

src/datepicker/bs-datepicker.component.ts

@@ -5,7 +5,7 @@ import {
 import { ComponentLoader } from '../component-loader/component-loader.class';
 import { ComponentLoaderFactory } from '../component-loader/component-loader.factory';
 import { BsDatepickerContainerComponent } from './themes/bs/bs-datepicker-container.component';
-import { Subscription } from 'rxjs';
+import { Observable, Subject, Subscription } from 'rxjs';
 import { BsDatepickerConfig } from './bs-datepicker.config';
 
 @Directive({
@@ -73,7 +73,14 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
   /**
    * Config object for datepicker
    */
-  @Input() bsConfig: Partial<BsDatepickerConfig>;
+  @Input() set bsConfig(bsConfig: Partial<BsDatepickerConfig>) {
+    this._bsConfig = bsConfig;
+    this.setConfig();
+    this._dateInputFormat$.next(bsConfig && bsConfig.dateInputFormat);
+  }
+  get bsConfig(): Partial<BsDatepickerConfig> {
+    return this._bsConfig;
+  }
   /**
    * Indicates whether datepicker's content is enabled or not
    */
@@ -91,10 +98,16 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
    */
   @Output() bsValueChange: EventEmitter<Date> = new EventEmitter();
 
+  get dateInputFormat$(): Observable<string> {
+    return this._dateInputFormat$;
+  }
+
   protected _subs: Subscription[] = [];
 
   private _datepicker: ComponentLoader<BsDatepickerContainerComponent>;
   private _datepickerRef: ComponentRef<BsDatepickerContainerComponent>;
+  private _bsConfig: Partial<BsDatepickerConfig>;
+  private readonly _dateInputFormat$ = new Subject<string>();
 
   constructor(public _config: BsDatepickerConfig,
               _elementRef: ElementRef,

src/datepicker/bs-daterangepicker-input.directive.ts

@@ -11,6 +11,7 @@ import { isArray, isDateValid } from '../chronos/utils/type-checks';
 import { BsDatepickerConfig } from './bs-datepicker.config';
 import { BsDaterangepickerDirective } from './bs-daterangepicker.component';
 import { BsLocaleService } from './bs-locale.service';
+import { distinctUntilChanged } from 'rxjs/operators';
 
 const BS_DATERANGEPICKER_VALUE_ACCESSOR = {
   provide: NG_VALUE_ACCESSOR,
@@ -63,6 +64,11 @@ export class BsDaterangepickerInputDirective
     this._localeService.localeChange.subscribe(() => {
       this._setInputValue(this._value);
     });
+
+    // update input value on format change
+    this._picker.rangeInputFormat$.pipe(distinctUntilChanged()).subscribe(() => {
+      this._setInputValue(this._value);
+    });
   }
 
   _setInputValue(date: Date[]): void {
@@ -141,7 +147,7 @@ export class BsDaterangepickerInputDirective
 
       this._value = (_input as string[])
         .map((_val: string): Date =>
-          parseDate(_val, this._picker._config.dateInputFormat, this._localeService.currentLocale))
+          parseDate(_val, this._picker._config.rangeInputFormat, this._localeService.currentLocale))
         .map((date: Date) => (isNaN(date.valueOf()) ? null : date));
     }
 

src/datepicker/bs-daterangepicker.component.ts

@@ -14,7 +14,7 @@ import {
 } from '@angular/core';
 import { BsDaterangepickerConfig } from './bs-daterangepicker.config';
 import { BsDaterangepickerContainerComponent } from './themes/bs/bs-daterangepicker-container.component';
-import { Subscription } from 'rxjs';
+import { Observable, Subject, Subscription } from 'rxjs';
 import { ComponentLoaderFactory } from '../component-loader/component-loader.factory';
 import { ComponentLoader } from '../component-loader/component-loader.class';
 import { BsDatepickerConfig } from './bs-datepicker.config';
@@ -86,7 +86,14 @@ export class BsDaterangepickerDirective
   /**
    * Config object for daterangepicker
    */
-  @Input() bsConfig: Partial<BsDaterangepickerConfig>;
+  @Input() set bsConfig(bsConfig: Partial<BsDaterangepickerConfig>) {
+    this._bsConfig = bsConfig;
+    this.setConfig();
+    this._rangeInputFormat$.next(bsConfig && bsConfig.rangeInputFormat);
+  }
+  get bsConfig(): Partial<BsDaterangepickerConfig> {
+    return this._bsConfig;
+  }
   /**
    * Indicates whether daterangepicker's content is enabled or not
    */
@@ -104,10 +111,16 @@ export class BsDaterangepickerDirective
    */
   @Output() bsValueChange: EventEmitter<Date[]> = new EventEmitter();
 
+  get rangeInputFormat$(): Observable<string> {
+    return this._rangeInputFormat$;
+  }
+
   protected _subs: Subscription[] = [];
 
   private _datepicker: ComponentLoader<BsDaterangepickerContainerComponent>;
   private _datepickerRef: ComponentRef<BsDaterangepickerContainerComponent>;
+  private _bsConfig: Partial<BsDaterangepickerConfig>;
+  private readonly _rangeInputFormat$ = new Subject<string>();
 
   constructor(public _config: BsDaterangepickerConfig,
               _elementRef: ElementRef,