coerce ISO 8601 strings to dates

Author: mmalerba

src/lib/datepicker/calendar.ts

@@ -60,19 +60,31 @@ export class MdCalendar<D> implements AfterContentInit, OnDestroy {
   private _intlChanges: Subscription;
 
   /** A date representing the period (month or year) to start the calendar in. */
-  @Input() startAt: D;
+  @Input()
+  get startAt(): D { return this._startAt; }
+  set startAt(value: D) { this._startAt = this._coerceDateProperty(value); }
+  private _startAt: D;
 
   /** Whether the calendar should be started in month or year view. */
   @Input() startView: 'month' | 'year' = 'month';
 
   /** The currently selected date. */
-  @Input() selected: D | null;
+  @Input()
+  get selected(): D | null { return this._selected; }
+  set selected(value: D | null) { this._selected = this._coerceDateProperty(value); }
+  private _selected: D | null;
 
   /** The minimum selectable date. */
-  @Input() minDate: D | null;
+  @Input()
+  get minDate(): D | null { return this._minDate; }
+  set minDate(value: D | null) { this._minDate = this._coerceDateProperty(value); }
+  private _minDate: D | null;
 
   /** The maximum selectable date. */
-  @Input() maxDate: D | null;
+  @Input()
+  get maxDate(): D | null { return this._maxDate; }
+  set maxDate(value: D | null) { this._maxDate = this._coerceDateProperty(value); }
+  private _maxDate: D | null;
 
   /** A function used to filter which dates are selectable. */
   @Input() dateFilter: (date: D) => boolean;
@@ -351,4 +363,16 @@ 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/datepicker-input.ts

@@ -123,6 +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.');
     }
@@ -143,7 +144,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   @Input()
   get min(): D | null { return this._min; }
   set min(value: D | null) {
-    this._min = value;
+    this._min = this._coerceDateProperty(value);
     this._validatorOnChange();
   }
   private _min: D | null;
@@ -152,7 +153,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   @Input()
   get max(): D | null { return this._max; }
   set max(value: D | null) {
-    this._max = value;
+    this._max = this._coerceDateProperty(value);
     this._validatorOnChange();
   }
   private _max: D | null;
@@ -329,4 +330,16 @@ 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.ts

@@ -133,7 +133,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 = date; }
+  set startAt(date: D | null) { this._startAt = this._coerceDateProperty(date); }
   private _startAt: D | null;
 
   /** The view that the calendar should start in. */
@@ -364,4 +364,16 @@ 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;
+  }
 }

src/lib/datepicker/month-view.ts

@@ -45,7 +45,7 @@ export class MdMonthView<D> implements AfterContentInit {
   get activeDate(): D { return this._activeDate; }
   set activeDate(value: D) {
     let oldActiveDate = this._activeDate;
-    this._activeDate = value || this._dateAdapter.today();
+    this._activeDate = this._coerceDateProperty(value) || this._dateAdapter.today();
     if (!this._hasSameMonthAndYear(oldActiveDate, this._activeDate)) {
       this._init();
     }
@@ -56,7 +56,7 @@ export class MdMonthView<D> implements AfterContentInit {
   @Input()
   get selected(): D { return this._selected; }
   set selected(value: D) {
-    this._selected = value;
+    this._selected = this._coerceDateProperty(value);
     this._selectedDate = this._getDateInCurrentMonth(this.selected);
   }
   private _selected: D;
@@ -182,4 +182,16 @@ export class MdMonthView<D> implements AfterContentInit {
     return !!(d1 && d2 && this._dateAdapter.getMonth(d1) == this._dateAdapter.getMonth(d2) &&
               this._dateAdapter.getYear(d1) == this._dateAdapter.getYear(d2));
   }
+
+  /**
+   * 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/year-view.ts

@@ -40,7 +40,7 @@ export class MdYearView<D> implements AfterContentInit {
   get activeDate(): D { return this._activeDate; }
   set activeDate(value: D) {
     let oldActiveDate = this._activeDate;
-    this._activeDate = value || this._dateAdapter.today();
+    this._activeDate = this._coerceDateProperty(value) || this._dateAdapter.today();
     if (this._dateAdapter.getYear(oldActiveDate) != this._dateAdapter.getYear(this._activeDate)) {
       this._init();
     }
@@ -51,7 +51,7 @@ export class MdYearView<D> implements AfterContentInit {
   @Input()
   get selected(): D { return this._selected; }
   set selected(value: D) {
-    this._selected = value;
+    this._selected = this._coerceDateProperty(value);
     this._selectedMonth = this._getMonthInCurrentYear(this.selected);
   }
   private _selected: D;
@@ -151,4 +151,16 @@ export class MdYearView<D> implements AfterContentInit {
 
     return false;
   }
+
+  /**
+   * 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;
+  }
 }