validate that datepicker input parses

Author: mmalerba

src/demo-app/datepicker/datepicker-demo.html

@@ -40,6 +40,7 @@ <h2>Result</h2>
            placeholder="Pick a date"
            (dateInput)="onDateInput($event)"
            (dateChange)="onDateChange($event)">
+    <md-error *ngIf="resultPickerModel.hasError('mdDatepickerParse')">Not a valid date!</md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMin')">Too early!</md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerMax')">Too late!</md-error>
     <md-error *ngIf="resultPickerModel.hasError('mdDatepickerFilter')">Date unavailable!</md-error>

src/lib/core/datetime/date-adapter.ts

@@ -107,15 +107,15 @@ export abstract class DateAdapter<D> {
    * @param value The value to parse.
    * @param parseFormat The expected format of the value being parsed
    *     (type is implementation-dependent).
-   * @returns The parsed date, or null if date could not be parsed.
+   * @returns The parsed date.
    */
   abstract parse(value: any, parseFormat: any): D | null;
 
   /**
    * Formats a date as a string.
-   * @param date The value to parse.
+   * @param date The value to format.
    * @param displayFormat The format to use to display the date as a string.
-   * @returns The parsed date, or null if date could not be parsed.
+   * @returns The formatted date string.
    */
   abstract format(date: D, displayFormat: any): string;
 
@@ -157,11 +157,11 @@ export abstract class DateAdapter<D> {
   abstract getISODateString(date: D): string;
 
   /**
-   * Checks whether the given value is a date object of type `D`.
+   * Checks whether the given value is a valid date object.
    * @param value The value to check.
-   * @returns Whether the value is a date object of type `D`.
+   * @returns Whether the value is a valid date object.
    */
-  abstract isDateObject(value: any): boolean;
+  abstract isValidDate(value: any): boolean;
 
   /**
    * Sets the locale used for all dates.

src/lib/core/datetime/native-date-adapter.spec.ts

@@ -297,12 +297,16 @@ describe('NativeDateAdapter', () => {
         .toEqual(new Date(2018, FEB, 1));
   });
 
-  it('should count a Date as a date object', () => {
-    expect(adapter.isDateObject(new Date())).toBe(true);
+  it('should count a Date as a valid date object', () => {
+    expect(adapter.isValidDate(new Date())).toBe(true);
   });
 
-  it('should not count a string as a date object', () => {
-    expect(adapter.isDateObject('1/1/2017')).toBe(false);
+  it('should not count a string as a valid date object', () => {
+    expect(adapter.isValidDate('1/1/2017')).toBe(false);
+  });
+
+  it('should not count InvalidDate as a valid date object', () => {
+    expect(adapter.isValidDate(new Date(NaN))).toBe(false);
   });
 });
 

src/lib/core/datetime/native-date-adapter.ts

@@ -148,11 +148,16 @@ export class NativeDateAdapter extends DateAdapter<Date> {
   parse(value: any): Date | null {
     // We have no way using the native JS Date to set the parse format or locale, so we ignore these
     // parameters.
-    let timestamp = typeof value == 'number' ? value : Date.parse(value);
-    return isNaN(timestamp) ? null : new Date(timestamp);
+    if (typeof value == 'number') {
+      return new Date(value);
+    }
+    return value ? new Date(Date.parse(value)) : null;
   }
 
   format(date: Date, displayFormat: Object): string {
+    if (!this.isValidDate(date)) {
+      return 'INVALID DATE';
+    }
     if (SUPPORTS_INTL_API) {
       let dtf = new Intl.DateTimeFormat(this.locale, displayFormat);
       return this._stripDirectionalityCharacters(dtf.format(date));
@@ -192,8 +197,14 @@ export class NativeDateAdapter extends DateAdapter<Date> {
     ].join('-');
   }
 
-  isDateObject(value: any) {
-    return value instanceof Date;
+  isValidDate(value: any) {
+    if (value == null) {
+      return true;
+    }
+    if (value instanceof Date) {
+      return !isNaN(value.getTime());
+    }
+    return false;
   }
 
   /** Creates a date but allows the month and date to overflow. */

src/lib/datepicker/datepicker-input.ts

@@ -116,9 +116,6 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
         this._dateFormats.parse.dateInput);
   }
   set value(value: D | null) {
-    if (value != null && !this._dateAdapter.isDateObject(value)) {
-      throw Error('Datepicker: value not recognized as a date object by DateAdapter.');
-    }
     let oldDate = this.value;
     this._renderer.setProperty(this._elementRef.nativeElement, 'value',
         value ? this._dateAdapter.format(value, this._dateFormats.display.dateInput) : '');
@@ -170,16 +167,22 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   private _datepickerSubscription: Subscription;
 
+  /** The form control validator for whether the input parses. */
+  private _parseValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
+    return (!control.value || this._dateAdapter.isValidDate(control.value)) ?
+        null : {'mdDatepickerParse': true};
+  }
+
   /** The form control validator for the min date. */
   private _minValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
-    return (!this.min || !control.value ||
+    return (!this.min || !this._dateAdapter.isValidDate(this.min) || !control.value ||
         this._dateAdapter.compareDate(this.min, control.value) <= 0) ?
         null : {'mdDatepickerMin': {'min': this.min, 'actual': control.value}};
   }
 
   /** The form control validator for the max date. */
   private _maxValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
-    return (!this.max || !control.value ||
+    return (!this.max || !this._dateAdapter.isValidDate(this.max) || !control.value ||
         this._dateAdapter.compareDate(this.max, control.value) >= 0) ?
         null : {'mdDatepickerMax': {'max': this.max, 'actual': control.value}};
   }
@@ -192,7 +195,8 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   /** The combined form control validator for this input. */
   private _validator: ValidatorFn | null =
-      Validators.compose([this._minValidator, this._maxValidator, this._filterValidator]);
+      Validators.compose(
+          [this._parseValidator, this._minValidator, this._maxValidator, this._filterValidator]);
 
   constructor(
       private _elementRef: ElementRef,

src/lib/datepicker/datepicker.ts

@@ -127,7 +127,9 @@ export class MdDatepicker<D> implements OnDestroy {
   get startAt(): D {
     // If an explicit startAt is set we start there, otherwise we start at whatever the currently
     // selected value is.
-    return this._startAt || (this._datepickerInput ? this._datepickerInput.value : null);
+    return this._startAt ||
+        (this._datepickerInput && this._dateAdapter.isValidDate(this._datepickerInput.value) ?
+            this._datepickerInput.value : null);
   }
   set startAt(date: D) { this._startAt = date; }
   private _startAt: D;
@@ -237,7 +239,11 @@ export class MdDatepicker<D> implements OnDestroy {
     }
     this._datepickerInput = input;
     this._inputSubscription =
-        this._datepickerInput._valueChange.subscribe((value: D) => this._selected = value);
+        this._datepickerInput._valueChange.subscribe((value: D) => {
+          if (this._dateAdapter.isValidDate(value)) {
+            this._selected = value;
+          }
+        });
   }
 
   /** Open the calendar. */