the datetime picker cannot update when user modifying value

Author: hackwalker

src/datetime-picker.directive.ts

@@ -3,9 +3,9 @@ import {
   Input, OnChanges, OnInit, Optional, Output,
   SimpleChanges, SkipSelf, ViewContainerRef
 } from '@angular/core';
-import {AbstractControl, ControlContainer, FormGroup, FormGroupDirective} from '@angular/forms';
-import {NguiDatetimePickerComponent} from './datetime-picker.component';
-import {NguiDatetime} from './datetime';
+import { AbstractControl, ControlContainer, FormGroup, FormGroupDirective } from '@angular/forms';
+import { NguiDatetimePickerComponent } from './datetime-picker.component';
+import { NguiDatetime } from './datetime';
 
 declare var moment: any;
 
@@ -29,36 +29,36 @@ function isNaN(value) {
  * If the given string is not a valid date, it defaults back to today
  */
 @Directive({
-  selector : '[ngui-datetime-picker]',
+  selector: '[ngui-datetime-picker]',
   providers: [NguiDatetime]
 })
 export class NguiDatetimePickerDirective implements OnInit, OnChanges {
-  @Input('date-format')       dateFormat: string;
-  @Input('parse-format')      parseFormat: string;
-  @Input('date-only')         dateOnly: boolean;
-  @Input('time-only')         timeOnly: boolean;
-  @Input('close-on-select')   closeOnSelect: boolean = true;
-  @Input('default-value')     defaultValue: Date | string;
-  @Input('minute-step')       minuteStep: number;
-  @Input('min-date')          minDate: Date | string;
-  @Input('max-date')          maxDate: Date | string;
-  @Input('min-hour')          minHour: Date | number;
-  @Input('max-hour')          maxHour: Date | number;
-  @Input('disabled-dates')    disabledDates: Date[];
-  @Input('show-close-layer')  showCloseLayer: boolean;
+  @Input('date-format') dateFormat: string;
+  @Input('parse-format') parseFormat: string;
+  @Input('date-only') dateOnly: boolean;
+  @Input('time-only') timeOnly: boolean;
+  @Input('close-on-select') closeOnSelect: boolean = true;
+  @Input('default-value') defaultValue: Date | string;
+  @Input('minute-step') minuteStep: number;
+  @Input('min-date') minDate: Date | string;
+  @Input('max-date') maxDate: Date | string;
+  @Input('min-hour') minHour: Date | number;
+  @Input('max-hour') maxHour: Date | number;
+  @Input('disabled-dates') disabledDates: Date[];
+  @Input('show-close-layer') showCloseLayer: boolean;
   @Input('show-today-shortcut') showTodayShortcut: boolean = false;
   @Input('show-week-numbers') showWeekNumbers: boolean;
   @Input() formControlName: string;
-  @Input('is-draggable')      isDraggable: boolean = true;
+  @Input('is-draggable') isDraggable: boolean = true;
 
-  @Input('ngModel')        ngModel: any;
+  @Input('ngModel') ngModel: any;
   @Output('ngModelChange') ngModelChange = new EventEmitter();
-  @Output('valueChanged')  valueChanged$  = new EventEmitter();
-  @Output('popupClosed')   popupClosed$   = new EventEmitter();
+  @Output('valueChanged') valueChanged$ = new EventEmitter();
+  @Output('popupClosed') popupClosed$ = new EventEmitter();
 
   private el: HTMLInputElement;                                  /* input element */
   private nguiDatetimePickerEl: HTMLElement;                      /* dropdown element */
-  private componentRef:ComponentRef<NguiDatetimePickerComponent>; /* dropdown component reference */
+  private componentRef: ComponentRef<NguiDatetimePickerComponent>; /* dropdown component reference */
   private ctrl: AbstractControl;
   private sub: any;
   // private justShown: boolean;
@@ -67,9 +67,9 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
   clickedDatetimePicker: boolean;
   userModifyingValue: boolean = false;
 
-  constructor (
-    private resolver:ComponentFactoryResolver,
-    private viewContainerRef:ViewContainerRef,
+  constructor(
+    private resolver: ComponentFactoryResolver,
+    private viewContainerRef: ViewContainerRef,
     @Optional() @Host() @SkipSelf() private parent: ControlContainer
   ) {
     this.el = this.viewContainerRef.element.nativeElement;
@@ -117,8 +117,8 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
     }
   }
 
-  ngOnInit ():void {
-    if(this.parent && this.formControlName) {
+  ngOnInit(): void {
+    if (this.parent && this.formControlName) {
       if (this.parent["form"]) {
         this.ctrl = (<FormGroup>this.parent["form"]).get(this.formControlName);
       } else if (this.parent["path"]) {
@@ -138,19 +138,19 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
     this.normalizeInput();
 
     //wrap this element with a <div> tag, so that we can position dynamic element correctly
-    let wrapper            = document.createElement("div");
-    wrapper.className      = 'ngui-datetime-picker-wrapper';
+    let wrapper = document.createElement("div");
+    wrapper.className = 'ngui-datetime-picker-wrapper';
     this.el.parentElement.insertBefore(wrapper, this.el.nextSibling);
     wrapper.appendChild(this.el);
 
     if (this.ngModel && this.ngModel.getTime) { // if it is a Date object given, set dateValue and toString method
       this.ngModel.toString = () => NguiDatetime.formatDate(this.ngModel, this.dateFormat, this.dateOnly);
     }
-    setTimeout( () => { // after [(ngModel)] is applied
+    setTimeout(() => { // after [(ngModel)] is applied
       if (this.el.tagName === 'INPUT') {
         this.inputElValueChanged(this.el.value); //set this.el.dateValue and reformat this.el.value
       }
-      if(this.ctrl) {
+      if (this.ctrl) {
         this.ctrl.markAsPristine();
       }
     });
@@ -160,7 +160,7 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
     // if this element is not an input tag, move dropdown after input tag
     // so that it displays correctly
     this.inputEl = this.el.tagName === "INPUT" ?
-        <HTMLInputElement>this.el : <HTMLInputElement>this.el.querySelector("input");
+      <HTMLInputElement>this.el : <HTMLInputElement>this.el.querySelector("input");
 
     if (this.inputEl) {
       this.inputEl.addEventListener('focus', this.showDatetimePicker);
@@ -176,7 +176,7 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
 
   ngOnChanges(changes: SimpleChanges) {
     let date;
-    if(changes && changes['ngModel']) {
+    if (changes && changes['ngModel']) {
       date = changes['ngModel'].currentValue;
 
       if (date && typeof date !== 'string') {
@@ -186,22 +186,28 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
       } else if (date && typeof date === 'string') {
         /** if program assigns a string value, then format to date later */
         if (!this.userModifyingValue) {
-          setTimeout( () => {
+          setTimeout(() => {
             let dt = this.getDate(date);
             dt.toString = () => NguiDatetime.formatDate(dt, this.dateFormat, this.dateOnly);
             this.ngModel = dt;
-            this.inputEl.value = ''+dt;
+            this.inputEl.value = '' + dt;
           })
+        } else {
+          let changeDate: any = new Date(date);
+          if (changeDate.toString() !== "Invalid Date") {
+            this.setInputElDateValue(date);
+            this.updateDatepicker();
+          }
         }
       }
-    } 
+    }
     this.userModifyingValue = false;
   }
 
   updateDatepicker() {
-    if(this.componentRef) {
+    if (this.componentRef) {
       let component = this.componentRef.instance;
-      component.defaultValue   = <Date>this.el['dateValue'];
+      component.defaultValue = <Date>this.el['dateValue'];
     }
   }
 
@@ -214,13 +220,13 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
       this.el['dateValue'] = null;
     }
 
-    if(this.ctrl) {
+    if (this.ctrl) {
       this.ctrl.markAsDirty();
     }
   }
 
-  ngOnDestroy ():void {
-   if(this.sub) {
+  ngOnDestroy(): void {
+    if (this.sub) {
       this.sub.unsubscribe();
     }
   }
@@ -229,7 +235,7 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
   inputElValueChanged = (date: string | Date): void => {
     this.setInputElDateValue(date);
     this.el.value = date.toString();
-    if(this.ctrl) {
+    if (this.ctrl) {
       this.ctrl.patchValue(this.el.value);
     }
     this.ngModel = this.el['dateValue'];
@@ -240,14 +246,14 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
   };
 
   //show datetimePicker element below the current element
-  showDatetimePicker = (event?): void =>  {
+  showDatetimePicker = (event?): void => {
     if (this.componentRef) { /* if already shown, do nothing */
       return;
     }
 
     let factory = this.resolver.resolveComponentFactory(NguiDatetimePickerComponent);
 
-    this.componentRef   = this.viewContainerRef.createComponent(factory);
+    this.componentRef = this.viewContainerRef.createComponent(factory);
     this.nguiDatetimePickerEl = this.componentRef.location.nativeElement;
     this.nguiDatetimePickerEl.setAttribute('tabindex', '32767');
     this.nguiDatetimePickerEl.setAttribute('draggable', String(this.isDraggable));
@@ -264,21 +270,21 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
     this.nguiDatetimePickerEl.addEventListener('blur', (event) => {
       this.hideDatetimePicker();
     });
-    this.nguiDatetimePickerEl.addEventListener('dragstart',this.drag_start,false);
-    document.body.addEventListener('dragover',this.drag_over,false);
-    document.body.addEventListener('drop',this.drop,false); 
+    this.nguiDatetimePickerEl.addEventListener('dragstart', this.drag_start, false);
+    document.body.addEventListener('dragover', this.drag_over, false);
+    document.body.addEventListener('drop', this.drop, false);
 
     let component = this.componentRef.instance;
-    component.defaultValue   = <Date>this.defaultValue || <Date>this.el['dateValue'];
-    component.dateFormat     = this.dateFormat;
-    component.dateOnly       = this.dateOnly;
-    component.timeOnly       = this.timeOnly;
-    component.minuteStep     = this.minuteStep;
-    component.minDate        = <Date>this.minDate;
-    component.maxDate        = <Date>this.maxDate;
-    component.minHour        = <number>this.minHour;
-    component.maxHour        = <number>this.maxHour;
-    component.disabledDates  = this.disabledDates;
+    component.defaultValue = <Date>this.defaultValue || <Date>this.el['dateValue'];
+    component.dateFormat = this.dateFormat;
+    component.dateOnly = this.dateOnly;
+    component.timeOnly = this.timeOnly;
+    component.minuteStep = this.minuteStep;
+    component.minDate = <Date>this.minDate;
+    component.maxDate = <Date>this.maxDate;
+    component.minHour = <number>this.minHour;
+    component.maxHour = <number>this.maxHour;
+    component.disabledDates = this.disabledDates;
     component.showCloseButton = this.closeOnSelect === false;
     component.showCloseLayer = this.showCloseLayer;
     component.showTodayShortcut = this.showTodayShortcut;
@@ -290,7 +296,7 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
     component.closing$.subscribe(() => {
       this.hideDatetimePicker();
     });
-    
+
     //Hack not to fire tab keyup event
     // this.justShown = true;
     // setTimeout(() => this.justShown = false, 100);
@@ -321,26 +327,26 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
     event && event.stopPropagation();
   };
 
-  private elementIn (el:Node, containerEl:Node):boolean {
+  private elementIn(el: Node, containerEl: Node): boolean {
     while (el = el.parentNode) {
       if (el === containerEl) return true;
     }
     return false;
   }
 
-  private styleDatetimePicker () {
+  private styleDatetimePicker() {
     // setting position, width, and height of auto complete dropdown
-    let thisElBCR                         = this.el.getBoundingClientRect();
+    let thisElBCR = this.el.getBoundingClientRect();
     // this.nguiDatetimePickerEl.style.minWidth      = thisElBCR.width + 'px';
-    this.nguiDatetimePickerEl.style.position   = 'absolute';
-    this.nguiDatetimePickerEl.style.zIndex     = '1000';
-    this.nguiDatetimePickerEl.style.left       = '0';
+    this.nguiDatetimePickerEl.style.position = 'absolute';
+    this.nguiDatetimePickerEl.style.zIndex = '1000';
+    this.nguiDatetimePickerEl.style.left = '0';
     this.nguiDatetimePickerEl.style.transition = 'height 0.3s ease-in';
 
     this.nguiDatetimePickerEl.style.visibility = 'hidden';
 
     setTimeout(() => {
-      let thisElBcr           = this.el.getBoundingClientRect();
+      let thisElBcr = this.el.getBoundingClientRect();
       let nguiDatetimePickerElBcr = this.nguiDatetimePickerEl.getBoundingClientRect();
 
       if (thisElBcr.bottom + nguiDatetimePickerElBcr.height > window.innerHeight) {
@@ -355,38 +361,38 @@ export class NguiDatetimePickerDirective implements OnInit, OnChanges {
     });
   };
 
-  private getDate = (arg: any): Date  => {
+  private getDate = (arg: any): Date => {
     let date: Date = <Date>arg;
     if (typeof arg === 'string') {
-      date =  NguiDatetime.parseDate(arg, this.parseFormat, this.dateFormat);
+      date = NguiDatetime.parseDate(arg, this.parseFormat, this.dateFormat);
     }
     return date;
   }
 
   private drag_start = (event) => {
-   if (document.activeElement.tagName == 'INPUT') {
+    if (document.activeElement.tagName == 'INPUT') {
       event.preventDefault();
       return false; // block dragging
-   }
+    }
     var style = window.getComputedStyle(event.target, null);
     event.dataTransfer.setData("text/plain",
-      (parseInt(style.getPropertyValue("left"),10) - event.clientX)
-      + ',' 
-      + (parseInt(style.getPropertyValue("top"),10) - event.clientY)
+      (parseInt(style.getPropertyValue("left"), 10) - event.clientX)
+      + ','
+      + (parseInt(style.getPropertyValue("top"), 10) - event.clientY)
     );
   }
 
   private drag_over(event) {
     event.preventDefault();
     return false;
-  } 
+  }
 
   private drop = (event) => {
     var offset = event.dataTransfer.getData("text/plain").split(',');
-    this.nguiDatetimePickerEl.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
-    this.nguiDatetimePickerEl.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
+    this.nguiDatetimePickerEl.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
+    this.nguiDatetimePickerEl.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';
     this.nguiDatetimePickerEl.style.bottom = '';
     event.preventDefault();
     return false;
-  } 
+  }
 }