fix(date-picker): register onTouched callback on blurred (#424)

The onTouched callback should be register to the `blur` event handler of the input element.
Fixes #426

Author: JLHwung

src/app/date-picker/date-picker.component.html

@@ -8,6 +8,7 @@
            [ngModel]="inputElementValue"
            (ngModelChange)="onViewDateChange($event)"
            (focus)="inputFocused()"
+           (blur)="inputBlurred()"
            [readonly]="componentConfig.disableKeypress"
            [disabled]="disabled"/>
   </div>

src/app/date-picker/date-picker.component.spec.ts

@@ -12,6 +12,7 @@ import {MonthCalendarComponent} from '../month-calendar/month-calendar.component
 import {DayCalendarService} from '../day-calendar/day-calendar.service';
 import {TimeSelectService} from '../time-select/time-select.service';
 import {UtilsService} from '../common/services/utils/utils.service';
+import {By} from '@angular/platform-browser';
 
 describe('Component: DatePickerComponent', () => {
   let component: DatePickerComponent;
@@ -77,4 +78,15 @@ describe('Component: DatePickerComponent', () => {
     component.dayTimeCalendarRef.onGoToCurrent.emit();
     expect(component.onGoToCurrent.emit).toHaveBeenCalledWith();
   });
+
+  it('should call onTouched when input is blurred', () => {
+    setComponentMode('day');
+    spyOn(component, 'onTouchedCallback');
+    component.registerOnTouched(component.onTouchedCallback);
+
+    const inputElement = fixture.debugElement.query(By.css('.dp-picker-input'));
+    inputElement.triggerEventHandler('blur', {});
+
+    expect(component.onTouchedCallback).toHaveBeenCalledWith();
+  });
 });

src/app/date-picker/date-picker.component.ts

@@ -266,6 +266,11 @@ export class DatePickerComponent implements OnChanges,
   }
 
   registerOnTouched(fn: any): void {
+    this.onTouchedCallback = fn;
+  }
+
+  onTouchedCallback() {
+
   }
 
   validate(formControl: FormControl): ValidationErrors {
@@ -389,6 +394,10 @@ export class DatePickerComponent implements OnChanges,
     }, this.componentConfig.onOpenDelay);
   }
 
+  inputBlurred() {
+    this.onTouchedCallback();
+  }
+
   showCalendars() {
     this.hideStateHelper = true;
     this.areCalendarsShown = true;