WIP: coerceDateProperty

Author: mmalerba

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

@@ -169,14 +169,14 @@ export abstract class DateAdapter<D> {
    * @param date The date to get the ISO date string for.
    * @returns The ISO date string date string.
    */
-  abstract toISODateString(date: D): string;
+  abstract toIsoDateString(date: D): string;
 
   /**
    * Creates a date from an RFC 3339 compatible date string (https://tools.ietf.org/html/rfc3339).
    * @param iso8601String The ISO date string to create a date from
    * @returns The date created from the ISO date string.
    */
-  abstract fromISODateString(iso8601String: string): D | null;
+  abstract fromIsoDateString(iso8601String: string): D | null;
 
   /**
    * Checks whether the given object is considered a date instance by this DateAdapter.

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

@@ -333,11 +333,11 @@ describe('NativeDateAdapter', () => {
   });
 
   it('should create dates from valid ISO strings', () => {
-    expect(adapter.fromISODateString('1985-04-12T23:20:50.52Z')).not.toBeNull();
-    expect(adapter.fromISODateString('1996-12-19T16:39:57-08:00')).not.toBeNull();
-    expect(adapter.fromISODateString('1937-01-01T12:00:27.87+00:20')).not.toBeNull();
-    expect(adapter.fromISODateString('1990-13-31T23:59:00Z')).toBeNull();
-    expect(adapter.fromISODateString('1/1/2017')).toBeNull();
+    expect(adapter.fromIsoDateString('1985-04-12T23:20:50.52Z')).not.toBeNull();
+    expect(adapter.fromIsoDateString('1996-12-19T16:39:57-08:00')).not.toBeNull();
+    expect(adapter.fromIsoDateString('1937-01-01T12:00:27.87+00:20')).not.toBeNull();
+    expect(adapter.fromIsoDateString('1990-13-31T23:59:00Z')).toBeNull();
+    expect(adapter.fromIsoDateString('1/1/2017')).toBeNull();
   });
 });
 

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

@@ -211,15 +211,17 @@ export class NativeDateAdapter extends DateAdapter<Date> {
         this.getYear(date), this.getMonth(date), this.getDate(date) + days);
   }
 
-  toISODateString(date: Date): string {
+  toIsoDateString(date: Date): string {
     return [
       date.getUTCFullYear(),
       this._2digit(date.getUTCMonth() + 1),
       this._2digit(date.getUTCDate())
     ].join('-');
   }
 
-  fromISODateString(iso8601String: string): Date | null {
+  fromIsoDateString(iso8601String: string): Date | null {
+    // The `Date` constructor accepts formats other than ISO 8601, so we need to make sure the
+    // string is the right format first.
     if (iso8601String.match(ISO_8601_REGEX)) {
       let d = new Date(iso8601String);
       if (this.isValid(d)) {

src/lib/datepicker/calendar.ts

@@ -40,6 +40,7 @@ import {
 } from '@angular/material/core';
 import {first} from 'rxjs/operator/first';
 import {Subscription} from 'rxjs/Subscription';
+import {coerceDateProperty} from './coerce-date-property';
 import {createMissingDateImplError} from './datepicker-errors';
 import {MdDatepickerIntl} from './datepicker-intl';
 
@@ -64,29 +65,29 @@ export class MdCalendar<D> implements AfterContentInit, OnDestroy {
 
   /** A date representing the period (month or year) to start the calendar in. */
   @Input()
-  get startAt(): D { return this._startAt; }
-  set startAt(value: D) { this._startAt = this._coerceDateProperty(value); }
-  private _startAt: D;
+  get startAt(): D | null { return this._startAt; }
+  set startAt(value: D | null) { this._startAt = coerceDateProperty(this._dateAdapter, value); }
+  private _startAt: D | null;
 
   /** Whether the calendar should be started in month or year view. */
   @Input() startView: 'month' | 'year' = 'month';
 
   /** The currently selected date. */
   @Input()
   get selected(): D | null { return this._selected; }
-  set selected(value: D | null) { this._selected = this._coerceDateProperty(value); }
+  set selected(value: D | null) { this._selected = coerceDateProperty(this._dateAdapter, 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._coerceDateProperty(value); }
+  set minDate(value: D | null) { this._minDate = coerceDateProperty(this._dateAdapter, 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._coerceDateProperty(value); }
+  set maxDate(value: D | null) { this._maxDate = coerceDateProperty(this._dateAdapter, value); }
   private _maxDate: D | null;
 
   /** A function used to filter which dates are selectable. */
@@ -366,16 +367,4 @@ export class MdCalendar<D> implements AfterContentInit, OnDestroy {
         (this._dateAdapter.getMonth(date) >= 7 ? 5 : 12);
     return this._dateAdapter.addCalendarMonths(date, increment);
   }
-
-  /**
-   * Attempts to coerce a property to a date by parsing it as a ISO 8601 string. If not a valid
-   * ISO 8601 string, returns the original vlaue.
-   */
-  private _coerceDateProperty(value: any): any {
-    if (typeof value === 'string') {
-      const d = this._dateAdapter.fromISODateString(value);
-      return d || value;
-    }
-    return value;
-  }
 }

src/lib/datepicker/coerce-date-property.spec.ts

@@ -0,0 +1,54 @@
+import {async, inject, TestBed} from '@angular/core/testing';
+import {DateAdapter, JAN, MdNativeDateModule} from '@angular/material/core';
+import {coerceDateProperty} from '@angular/material/datepicker';
+
+
+describe('coerceDateProperty', () => {
+  let adapter: DateAdapter<Date>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdNativeDateModule],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(inject([DateAdapter], (dateAdapter: DateAdapter<Date>) => {
+    adapter = dateAdapter;
+  }));
+
+  it('should pass through existing date', () => {
+    const d = new Date(2017, JAN, 1);
+    expect(coerceDateProperty(adapter, d)).toBe(d);
+  });
+
+  it('should pass through invalid date', () => {
+    const d = new Date(NaN);
+    expect(coerceDateProperty(adapter, d)).toBe(d);
+  });
+
+  it('should pass through null and undefined', () => {
+    expect(coerceDateProperty(adapter, null)).toBeNull();
+    expect(coerceDateProperty(adapter, undefined)).toBeUndefined();
+  });
+
+  it('should coerce empty string to null', () => {
+    expect(coerceDateProperty(adapter, '')).toBe(null);
+  });
+
+  it('should coerce ISO 8601 string to date', () => {
+    let isoString = '2017-01-01T00:00:00Z';
+    expect(coerceDateProperty(adapter, isoString)).toEqual(new Date(isoString));
+  });
+
+  it('should throw when given a number', () => {
+    expect(() => coerceDateProperty(adapter, 5)).toThrow();
+    expect(() => coerceDateProperty(adapter, 0)).toThrow();
+  });
+
+  it('should throw when given a string with incorrect format', () => {
+    expect(() => coerceDateProperty(adapter, '1/1/2017')).toThrow();
+    expect(() => coerceDateProperty(adapter, 'hello')).toThrow();
+  });
+});

src/lib/datepicker/coerce-date-property.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {DateAdapter} from '@angular/material/core';
+
+
+/**
+ * Function that attempts to coerce a value to a date using a DateAdapter. Date instances, null,
+ * and undefined will be passed through. Empty strings will be coerced to null. Valid ISO 8601
+ * strings (https://www.ietf.org/rfc/rfc3339.txt) will be coerced to dates. All other values will
+ * result in an error being thrown.
+ * @param adapter The date adapter to use for coercion
+ * @param value The value to coerce.
+ * @return A date object coerced from the value.
+ * @throws Throws when the value cannot be coerced.
+ */
+export function coerceDateProperty<D>(adapter: DateAdapter<D>, value: any): D | null {
+  if (typeof value === 'string') {
+    if (value == '') {
+      value = null;
+    } else {
+      value = adapter.fromIsoDateString(value) || value;
+    }
+  }
+  if (value == null || adapter.isDateInstance(value)) {
+    return value;
+  }
+  throw Error(`Datepicker: Value must be either a date object recognized by the DateAdapter or ` +
+              `an ISO 8601 string. Instead got: ${value}`);
+}

src/lib/datepicker/datepicker-input.ts

@@ -34,6 +34,7 @@ import {
 import {DateAdapter, MD_DATE_FORMATS, MdDateFormats} from '@angular/material/core';
 import {MdFormField} from '@angular/material/form-field';
 import {Subscription} from 'rxjs/Subscription';
+import {coerceDateProperty} from './coerce-date-property';
 import {MdDatepicker} from './datepicker';
 import {createMissingDateImplError} from './datepicker-errors';
 
@@ -74,8 +75,8 @@ export class MdDatepickerInputEvent<D> {
   host: {
     '[attr.aria-haspopup]': 'true',
     '[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null',
-    '[attr.min]': 'min ? _dateAdapter.toISODateString(min) : null',
-    '[attr.max]': 'max ? _dateAdapter.toISODateString(max) : null',
+    '[attr.min]': 'min ? _dateAdapter.toIsoDateString(min) : null',
+    '[attr.max]': 'max ? _dateAdapter.toIsoDateString(max) : null',
     '[disabled]': 'disabled',
     '(input)': '_onInput($event.target.value)',
     '(change)': '_onChange()',
@@ -122,10 +123,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
     return this._value;
   }
   set value(value: D | null) {
-    value = this._coerceDateProperty(value);
-    if (value != null && !this._dateAdapter.isDateInstance(value)) {
-      throw Error('Datepicker: value not recognized as a date object by DateAdapter.');
-    }
+    value = coerceDateProperty(this._dateAdapter, value);
     this._lastValueValid = !value || this._dateAdapter.isValid(value);
     value = this._getValidDateOrNull(value);
 
@@ -143,7 +141,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   @Input()
   get min(): D | null { return this._min; }
   set min(value: D | null) {
-    this._min = this._coerceDateProperty(value);
+    this._min = coerceDateProperty(this._dateAdapter, value);
     this._validatorOnChange();
   }
   private _min: D | null;
@@ -152,7 +150,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   @Input()
   get max(): D | null { return this._max; }
   set max(value: D | null) {
-    this._max = this._coerceDateProperty(value);
+    this._max = coerceDateProperty(this._dateAdapter, value);
     this._validatorOnChange();
   }
   private _max: D | null;
@@ -200,23 +198,23 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   /** The form control validator for the min date. */
   private _minValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
-    const controlValue = this._coerceDateProperty(control.value);
+    const controlValue = coerceDateProperty(this._dateAdapter, control.value);
     return (!this.min || !controlValue ||
         this._dateAdapter.compareDate(this.min, controlValue) <= 0) ?
-        null : {'mdDatepickerMin': {'min': this.min, 'actual': control.value}};
+        null : {'mdDatepickerMin': {'min': this.min, 'actual': controlValue}};
   }
 
   /** The form control validator for the max date. */
   private _maxValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
-    const controlValue = this._coerceDateProperty(control.value);
+    const controlValue = coerceDateProperty(this._dateAdapter, control.value);
     return (!this.max || !controlValue ||
         this._dateAdapter.compareDate(this.max, controlValue) >= 0) ?
-        null : {'mdDatepickerMax': {'max': this.max, 'actual': control.value}};
+        null : {'mdDatepickerMax': {'max': this.max, 'actual': controlValue}};
   }
 
   /** The form control validator for the date filter. */
   private _filterValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
-    const controlValue = this._coerceDateProperty(control.value);
+    const controlValue = coerceDateProperty(this._dateAdapter, control.value);
     return !this._dateFilter || !controlValue || this._dateFilter(controlValue) ?
         null : {'mdDatepickerFilter': true};
   }
@@ -332,16 +330,4 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   private _getValidDateOrNull(obj: any): D | null {
     return (this._dateAdapter.isDateInstance(obj) && this._dateAdapter.isValid(obj)) ? obj : null;
   }
-
-  /**
-   * Attempts to coerce a property to a date by parsing it as a ISO 8601 string. If not a valid
-   * ISO 8601 string, returns the original vlaue.
-   */
-  private _coerceDateProperty(value: any): any {
-    if (typeof value === 'string') {
-      const d = this._dateAdapter.fromISODateString(value);
-      return d || value;
-    }
-    return value;
-  }
 }

src/lib/datepicker/datepicker.spec.ts

@@ -49,6 +49,7 @@ describe('MdDatepicker', () => {
           DatepickerWithChangeAndInputEvents,
           DatepickerWithFilterAndValidation,
           DatepickerWithFormControl,
+          DatepickerWithISOStrings,
           DatepickerWithMinAndMaxValidation,
           DatepickerWithNgModel,
           DatepickerWithStartAt,
@@ -272,8 +273,8 @@ describe('MdDatepicker', () => {
       it('should throw when given wrong data type', () => {
         testComponent.date = '1/1/2017' as any;
 
-        expect(() => fixture.detectChanges())
-            .toThrowError(/Datepicker: value not recognized as a date object by DateAdapter\./);
+        expect(() => fixture.detectChanges()).toThrowError(
+            /Datepicker: Value must be either a date object recognized by the DateAdapter or an ISO 8601 string\. Instead got: 1\/1\/2017/);
 
         testComponent.date = null;
       });

src/lib/datepicker/datepicker.ts

@@ -42,6 +42,7 @@ import {DOCUMENT} from '@angular/platform-browser';
 import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
 import {MdCalendar} from './calendar';
+import {coerceDateProperty} from './coerce-date-property';
 import {createMissingDateImplError} from './datepicker-errors';
 import {MdDatepickerInput} from './datepicker-input';
 
@@ -129,7 +130,7 @@ export class MdDatepicker<D> implements OnDestroy {
     // selected value is.
     return this._startAt || (this._datepickerInput ? this._datepickerInput.value : null);
   }
-  set startAt(date: D | null) { this._startAt = this._coerceDateProperty(date); }
+  set startAt(date: D | null) { this._startAt = coerceDateProperty(this._dateAdapter, date); }
   private _startAt: D | null;
 
   /** The view that the calendar should start in. */
@@ -360,16 +361,4 @@ export class MdDatepicker<D> implements OnDestroy {
         { overlayX: 'end', overlayY: 'bottom' }
       );
   }
-
-  /**
-   * Attempts to coerce a property to a date by parsing it as a ISO 8601 string. If not a valid
-   * ISO 8601 string, returns the original vlaue.
-   */
-  private _coerceDateProperty(value: any): any {
-    if (typeof value === 'string') {
-      const d = this._dateAdapter.fromISODateString(value);
-      return d || value;
-    }
-    return value;
-  }
 }