fix(datepicker): correctly set initial input value (#2962)

fixes #2929 closes #2930
valor-software · Nov 2, 2017 · 5662e20 · 5662e20
1 parent d32cbbc
commit 5662e20
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 54 deletions.
diff --git a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts b/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts
@@ -7,26 +7,7 @@ import { Component } from '@angular/core';
 export class DemoDatePickerPopupComponent {
   minDate = new Date(2017, 5, 10);
   maxDate = new Date(2018, 9, 15);
-  _bsValue: Date;
-  get bsValue(): Date {
-    return this._bsValue;
-  }
 
-  set bsValue(v: Date) {
-    console.log(v);
-    this._bsValue = v;
-  }
-
-  _bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
-  get bsRangeValue(): any {
-    return this._bsRangeValue;
-  }
-
-  set bsRangeValue(v: any) {
-    this._bsRangeValue = v;
-  }
-
-  log(v: any) {
-    console.log(v);
-  }
+  bsValue: Date = new Date();
+  bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
 }
diff --git a/src/datepicker/bs-datepicker-input.directive.ts b/src/datepicker/bs-datepicker-input.directive.ts
@@ -23,24 +23,24 @@ const BS_DATEPICKER_VALUE_ACCESSOR = {
   providers: [BS_DATEPICKER_VALUE_ACCESSOR]
 })
 export class BsDatepickerInputDirective
-  implements OnInit, ControlValueAccessor {
+  implements ControlValueAccessor {
   private _onChange = Function.prototype;
   private _onTouched = Function.prototype;
 
   constructor(@Host() private _picker: BsDatepickerComponent,
               private _renderer: Renderer2,
-              private _elRef: ElementRef) {}
+              private _elRef: ElementRef) {
+    this._picker.bsValueChange.subscribe((v: Date) => this._setInputValue(v));
+  }
 
-  ngOnInit(): void {
-    this._picker.bsValueChange.subscribe((v: Date) => {
-      const initialDate = formatDate(
-        v,
-        this._picker._config.dateInputFormat,
-        this._picker._config.locale
-      ) || '';
-      this._renderer.setProperty(this._elRef.nativeElement, 'value', initialDate);
-      this._onChange(v);
-    });
+  _setInputValue(v: Date): void {
+    const initialDate = formatDate(
+      v,
+      this._picker._config.dateInputFormat,
+      this._picker._config.locale
+    ) || '';
+    this._renderer.setProperty(this._elRef.nativeElement, 'value', initialDate);
+    this._onChange(v);
   }
 
   onChange(event: any) {

diff --git a/src/datepicker/bs-daterangepicker-input.directive.ts b/src/datepicker/bs-daterangepicker-input.directive.ts
@@ -21,33 +21,33 @@ const BS_DATERANGEPICKER_VALUE_ACCESSOR = {
   providers: [BS_DATERANGEPICKER_VALUE_ACCESSOR]
 })
 export class BsDaterangepickerInputDirective
-  implements OnInit, ControlValueAccessor {
+  implements ControlValueAccessor {
   private _onChange = Function.prototype;
   private _onTouched = Function.prototype;
 
   constructor(@Host() private _picker: BsDaterangepickerComponent,
               private _renderer: Renderer2,
-              private _elRef: ElementRef) {}
+              private _elRef: ElementRef) {
+    this._picker.bsValueChange.subscribe((v: Date[]) => this._setInputValue(v));
+  }
 
-  ngOnInit(): void {
-    this._picker.bsValueChange.subscribe((v: Date[]) => {
-      let range = '';
-      if (v) {
-        const start = formatDate(
-          v[0],
-          this._picker._config.rangeInputFormat,
-          this._picker._config.locale
-        ) || '';
-        const end = formatDate(
-          v[1],
-          this._picker._config.rangeInputFormat,
-          this._picker._config.locale
-        ) || '';
-        range = (start && end) ? start + this._picker._config.rangeSeparator + end : '';
-      }
-      this._renderer.setProperty(this._elRef.nativeElement, 'value', range);
-      this._onChange(v);
-    });
+  _setInputValue(date: Date[]): void {
+    let range = '';
+    if (date) {
+      const start = formatDate(
+        date[0],
+        this._picker._config.rangeInputFormat,
+        this._picker._config.locale
+      ) || '';
+      const end = formatDate(
+        date[1],
+        this._picker._config.rangeInputFormat,
+        this._picker._config.locale
+      ) || '';
+      range = (start && end) ? start + this._picker._config.rangeSeparator + end : '';
+    }
+    this._renderer.setProperty(this._elRef.nativeElement, 'value', range);
+    this._onChange(date);
   }
 
   onChange(event: any) {