return invalid date instead of throwing

Author: mmalerba

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

@@ -186,6 +186,12 @@ export abstract class DateAdapter<D> {
    */
   abstract isValid(date: D): boolean;
 
+  /**
+   * Gets date instance that is not valid.
+   * @returns An invalid date.
+   */
+  abstract invalid(): D;
+
   /**
    * Attempts to deserialize a value to a valid date object. This is different from parsing in that
    * deserialize should only accept non-ambiguous, locale-independent formats (e.g. a ISO 8601
@@ -196,14 +202,13 @@ export abstract class DateAdapter<D> {
    * to also deserialize the format used by your backend.
    * @param value The value to be deserialized into a date object.
    * @returns The deserialized date object, either a valid date, null if the value can be
-   *     deserialized into a null date (e.g. the empty string).
-   * @throws If the given value cannot be deserialized into a valid date or null.
+   *     deserialized into a null date (e.g. the empty string), or an invalid date.
    */
   deserialize(value: any): D | null {
     if (value == null || this.isDateInstance(value) && this.isValid(value)) {
       return value;
     }
-    throw Error(`Could not deserialize "${value}" into a valid date object.`);
+    return this.invalid();
   }
 
   /**
@@ -236,7 +241,15 @@ export abstract class DateAdapter<D> {
    *     Null dates are considered equal to other null dates.
    */
   sameDate(first: D | null, second: D | null): boolean {
-    return first && second ? !this.compareDate(first, second) : first == second;
+    if (first && second) {
+      let firstValid = this.isValid(first);
+      let secondValid = this.isValid(second);
+      if (firstValid && secondValid) {
+        return !this.compareDate(first, second)
+      }
+      return firstValid == secondValid;
+    }
+    return first == second;
   }
 
   /**

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

@@ -10,6 +10,7 @@ const SUPPORTS_INTL = typeof Intl != 'undefined';
 describe('NativeDateAdapter', () => {
   const platform = new Platform();
   let adapter: NativeDateAdapter;
+  let assertValidDate: (d: Date | null, valid: boolean) => void;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -19,6 +20,13 @@ describe('NativeDateAdapter', () => {
 
   beforeEach(inject([DateAdapter], (d: NativeDateAdapter) => {
     adapter = d;
+
+    assertValidDate = (d: Date | null, valid: boolean) => {
+      expect(adapter.isDateInstance(d)).not.toBeNull(`Expected ${d} to be a date instance`);
+      expect(adapter.isValid(d!)).toBe(valid,
+          `Expected ${d} to be ${valid ? 'valid' : 'invalid'},` +
+          ` but was ${valid ? 'invalid' : 'valid'}`);
+    }
   }));
 
   it('should get year', () => {
@@ -334,18 +342,22 @@ describe('NativeDateAdapter', () => {
   });
 
   it('should create dates from valid ISO strings', () => {
-    expect(adapter.deserialize('1985-04-12T23:20:50.52Z')).not.toBeNull();
-    expect(adapter.deserialize('1996-12-19T16:39:57-08:00')).not.toBeNull();
-    expect(adapter.deserialize('1937-01-01T12:00:27.87+00:20')).not.toBeNull();
-    expect(adapter.deserialize('2017-01-01')).not.toBeNull();
-    expect(adapter.deserialize('2017-01-01T00:00:00')).not.toBeNull();
-    expect(() => adapter.deserialize('1990-13-31T23:59:00Z')).toThrow();
-    expect(() => adapter.deserialize('1/1/2017')).toThrow();
-    expect(() => adapter.deserialize('2017-01-01T')).toThrow();
+    assertValidDate(adapter.deserialize('1985-04-12T23:20:50.52Z'), true);
+    assertValidDate(adapter.deserialize('1996-12-19T16:39:57-08:00'), true);
+    assertValidDate(adapter.deserialize('1937-01-01T12:00:27.87+00:20'), true);
+    assertValidDate(adapter.deserialize('2017-01-01'), true);
+    assertValidDate(adapter.deserialize('2017-01-01T00:00:00'), true);
+    assertValidDate(adapter.deserialize('1990-13-31T23:59:00Z'), false);
+    assertValidDate(adapter.deserialize('1/1/2017'), false);
+    assertValidDate(adapter.deserialize('2017-01-01T'), false);
     expect(adapter.deserialize('')).toBeNull();
     expect(adapter.deserialize(null)).toBeNull();
-    expect(adapter.deserialize(new Date())).not.toBeNull();
-    expect(() => adapter.deserialize(new Date(NaN))).toThrow();
+    assertValidDate(adapter.deserialize(new Date()), true);
+    assertValidDate(adapter.deserialize(new Date(NaN)), false);
+  });
+
+  it('should create an invalid date', () => {
+    assertValidDate(adapter.invalid(), false);
   });
 });
 

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

@@ -222,8 +222,8 @@ export class NativeDateAdapter extends DateAdapter<Date> {
 
   /**
    * Returns the given value if given a valid Date or null. Deserializes valid ISO 8601 strings
-   * (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Throws on
-   * all other values.
+   * (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Returns an
+   * invalid date for all other values.
    */
   deserialize(value: any): Date | null {
     if (typeof value === 'string') {
@@ -250,6 +250,10 @@ export class NativeDateAdapter extends DateAdapter<Date> {
     return !isNaN(date.getTime());
   }
 
+  invalid(): Date {
+    return new Date(NaN);
+  }
+
   /** Creates a date but allows the month and date to overflow. */
   private _createDateWithOverflow(year: number, month: number, date: number) {
     let result = new Date(year, month, date);

src/lib/datepicker/calendar.ts

@@ -66,7 +66,9 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
   /** A date representing the period (month or year) to start the calendar in. */
   @Input()
   get startAt(): D | null { return this._startAt; }
-  set startAt(value: D | null) { this._startAt = this._dateAdapter.deserialize(value); }
+  set startAt(value: D | null) {
+    this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+  }
   private _startAt: D | null;
 
   /** Whether the calendar should be started in month or year view. */
@@ -75,19 +77,25 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
   /** The currently selected date. */
   @Input()
   get selected(): D | null { return this._selected; }
-  set selected(value: D | null) { this._selected = this._dateAdapter.deserialize(value); }
+  set selected(value: D | null) {
+    this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+  }
   private _selected: D | null;
 
   /** The minimum selectable date. */
   @Input()
   get minDate(): D | null { return this._minDate; }
-  set minDate(value: D | null) { this._minDate = this._dateAdapter.deserialize(value); }
+  set minDate(value: D | null) {
+    this._minDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+  }
   private _minDate: D | null;
 
   /** The maximum selectable date. */
   @Input()
   get maxDate(): D | null { return this._maxDate; }
-  set maxDate(value: D | null) { this._maxDate = this._dateAdapter.deserialize(value); }
+  set maxDate(value: D | null) {
+    this._maxDate = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
+  }
   private _maxDate: D | null;
 
   /** A function used to filter which dates are selectable. */
@@ -384,4 +392,12 @@ export class MatCalendar<D> implements AfterContentInit, OnDestroy, OnChanges {
         (this._dateAdapter.getMonth(date) >= 7 ? 5 : 12);
     return this._dateAdapter.addCalendarMonths(date, increment);
   }
+
+  /**
+   * @param obj The object to check.
+   * @returns The given object if it is both a date instance and valid, otherwise null.
+   */
+  private _getValidDateOrNull(obj: any): D | null {
+    return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
+  }
 }

src/lib/datepicker/datepicker-input.ts

@@ -115,7 +115,6 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
     value = this._dateAdapter.deserialize(value);
     this._lastValueValid = !value || this._dateAdapter.isValid(value);
     value = this._getValidDateOrNull(value);
-
     let oldDate = this.value;
     this._value = value;
     this._renderer.setProperty(this._elementRef.nativeElement, 'value',
@@ -130,7 +129,7 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
   @Input()
   get min(): D | null { return this._min; }
   set min(value: D | null) {
-    this._min = this._dateAdapter.deserialize(value);
+    this._min = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
     this._validatorOnChange();
   }
   private _min: D | null;
@@ -139,7 +138,7 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
   @Input()
   get max(): D | null { return this._max; }
   set max(value: D | null) {
-    this._max = this._dateAdapter.deserialize(value);
+    this._max = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
     this._validatorOnChange();
   }
   private _max: D | null;
@@ -187,23 +186,23 @@ export class MatDatepickerInput<D> implements AfterContentInit, ControlValueAcce
 
   /** The form control validator for the min date. */
   private _minValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
-    const controlValue = this._dateAdapter.deserialize(control.value);
+    const controlValue = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));
     return (!this.min || !controlValue ||
         this._dateAdapter.compareDate(this.min, controlValue) <= 0) ?
         null : {'matDatepickerMin': {'min': this.min, 'actual': controlValue}};
   }
 
   /** The form control validator for the max date. */
   private _maxValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
-    const controlValue = this._dateAdapter.deserialize(control.value);
+    const controlValue = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));
     return (!this.max || !controlValue ||
         this._dateAdapter.compareDate(this.max, controlValue) >= 0) ?
         null : {'matDatepickerMax': {'max': this.max, 'actual': controlValue}};
   }
 
   /** The form control validator for the date filter. */
   private _filterValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
-    const controlValue = this._dateAdapter.deserialize(control.value);
+    const controlValue = this._getValidDateOrNull(this._dateAdapter.deserialize(control.value));
     return !this._dateFilter || !controlValue || this._dateFilter(controlValue) ?
         null : {'matDatepickerFilter': true};
   }

src/lib/datepicker/datepicker.spec.ts

@@ -272,13 +272,10 @@ describe('MatDatepicker', () => {
         expect((ownedElement as Element).tagName.toLowerCase()).toBe('mat-calendar');
       });
 
-      it('should throw when given wrong data type', () => {
+      it('should not throw when given wrong data type', () => {
         testComponent.date = '1/1/2017' as any;
 
-        expect(() => fixture.detectChanges())
-            .toThrowError('Could not deserialize "1/1/2017" into a valid date object.');
-
-        testComponent.date = null;
+        expect(() => fixture.detectChanges()).not.toThrow();
       });
     });
 

src/lib/datepicker/datepicker.ts

@@ -132,7 +132,9 @@ export class MatDatepicker<D> implements OnDestroy {
     // selected value is.
     return this._startAt || (this._datepickerInput ? this._datepickerInput.value : null);
   }
-  set startAt(date: D | null) { this._startAt = this._dateAdapter.deserialize(date); }
+  set startAt(date: D | null) {
+    this._startAt = this._getValidDateOrNull(this._dateAdapter.deserialize(date));
+  }
   private _startAt: D | null;
 
   /** The view that the calendar should start in. */
@@ -366,4 +368,12 @@ export class MatDatepicker<D> implements OnDestroy {
         { overlayX: 'end', overlayY: 'bottom' }
       );
   }
+
+  /**
+   * @param obj The object to check.
+   * @returns The given object if it is both a date instance and valid, otherwise null.
+   */
+  private _getValidDateOrNull(obj: any): D | null {
+    return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
+  }
 }

src/lib/datepicker/month-view.ts

@@ -46,7 +46,8 @@ export class MatMonthView<D> implements AfterContentInit {
   get activeDate(): D { return this._activeDate; }
   set activeDate(value: D) {
     let oldActiveDate = this._activeDate;
-    this._activeDate = this._dateAdapter.deserialize(value) || this._dateAdapter.today();
+    this._activeDate =
+        this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
     if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {
       this._init();
     }
@@ -57,7 +58,7 @@ export class MatMonthView<D> implements AfterContentInit {
   @Input()
   get selected(): D | null { return this._selected; }
   set selected(value: D | null) {
-    this._selected = this._dateAdapter.deserialize(value);
+    this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
     this._selectedDate = this._getDateInCurrentMonth(this._selected);
   }
   private _selected: D | null;
@@ -185,4 +186,12 @@ export class MatMonthView<D> implements AfterContentInit {
     return !!(d1 && d2 && this._dateAdapter.getMonth(d1) == this._dateAdapter.getMonth(d2) &&
               this._dateAdapter.getYear(d1) == this._dateAdapter.getYear(d2));
   }
+
+  /**
+   * @param obj The object to check.
+   * @returns The given object if it is both a date instance and valid, otherwise null.
+   */
+  private _getValidDateOrNull(obj: any): D | null {
+    return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
+  }
 }

src/lib/datepicker/year-view.ts

@@ -41,7 +41,8 @@ export class MatYearView<D> implements AfterContentInit {
   get activeDate(): D { return this._activeDate; }
   set activeDate(value: D) {
     let oldActiveDate = this._activeDate;
-    this._activeDate = this._dateAdapter.deserialize(value) || this._dateAdapter.today();
+    this._activeDate =
+        this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
     if (this._dateAdapter.getYear(oldActiveDate) != this._dateAdapter.getYear(this._activeDate)) {
       this._init();
     }
@@ -52,7 +53,7 @@ export class MatYearView<D> implements AfterContentInit {
   @Input()
   get selected(): D | null { return this._selected; }
   set selected(value: D | null) {
-    this._selected = this._dateAdapter.deserialize(value);
+    this._selected = this._getValidDateOrNull(this._dateAdapter.deserialize(value));
     this._selectedMonth = this._getMonthInCurrentYear(this._selected);
   }
   private _selected: D | null;
@@ -154,4 +155,12 @@ export class MatYearView<D> implements AfterContentInit {
 
     return false;
   }
+
+  /**
+   * @param obj The object to check.
+   * @returns The given object if it is both a date instance and valid, otherwise null.
+   */
+  private _getValidDateOrNull(obj: any): D | null {
+    return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
+  }
 }

src/material-moment-adapter/adapter/moment-date-adapter.spec.ts

@@ -16,6 +16,7 @@ import {MomentDateAdapter} from './moment-date-adapter';
 
 describe('MomentDateAdapter', () => {
   let adapter: MomentDateAdapter;
+  let assertValidDate: (d: moment.Moment | null, valid: boolean) => void;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -27,6 +28,13 @@ describe('MomentDateAdapter', () => {
     moment.locale('en');
     adapter = d;
     adapter.setLocale('en');
+
+    assertValidDate = (d: moment.Moment | null, valid: boolean) => {
+      expect(adapter.isDateInstance(d)).not.toBeNull(`Expected ${d} to be a date instance`);
+      expect(adapter.isValid(d!)).toBe(valid,
+          `Expected ${d} to be ${valid ? 'valid' : 'invalid'},` +
+          ` but was ${valid ? 'invalid' : 'valid'}`);
+    }
   }));
 
   it('should get year', () => {
@@ -306,17 +314,17 @@ describe('MomentDateAdapter', () => {
   });
 
   it('should create valid dates from valid ISO strings', () => {
-    expect(adapter.deserialize('1985-04-12T23:20:50.52Z')).not.toBeNull();
-    expect(adapter.deserialize('1996-12-19T16:39:57-08:00')).not.toBeNull();
-    expect(adapter.deserialize('1937-01-01T12:00:27.87+00:20')).not.toBeNull();
-    expect(() => adapter.deserialize('1990-13-31T23:59:00Z')).toThrow();
-    expect(() => adapter.deserialize('1/1/2017')).toThrow();
+    assertValidDate(adapter.deserialize('1985-04-12T23:20:50.52Z'), true);
+    assertValidDate(adapter.deserialize('1996-12-19T16:39:57-08:00'), true);
+    assertValidDate(adapter.deserialize('1937-01-01T12:00:27.87+00:20'), true);
+    assertValidDate(adapter.deserialize('1990-13-31T23:59:00Z'), false);
+    assertValidDate(adapter.deserialize('1/1/2017'), false);
     expect(adapter.deserialize('')).toBeNull();
     expect(adapter.deserialize(null)).toBeNull();
-    expect(adapter.deserialize(new Date())).not.toBeNull();
-    expect(() => adapter.deserialize(new Date(NaN))).toThrow();
-    expect(adapter.deserialize(moment())).not.toBeNull();
-    expect(() => adapter.deserialize(moment.invalid())).toThrow();
+    assertValidDate(adapter.deserialize(new Date()), true);
+    assertValidDate(adapter.deserialize(new Date(NaN)), false);
+    assertValidDate(adapter.deserialize(moment()), true);
+    assertValidDate(adapter.deserialize(moment.invalid()), false);
   });
 
   it('setLocale should not modify global moment locale', () => {
@@ -357,6 +365,10 @@ describe('MomentDateAdapter', () => {
     adapter.isValid(date);
     expect(date.locale()).toBe('en');
   });
+
+  it('should create invalid date', () => {
+    assertValidDate(adapter.invalid(), false);
+  });
 });
 
 describe('MomentDateAdapter with MAT_DATE_LOCALE override', () => {