feat(datepicker): merge datepicker branch into master

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

@@ -1,4 +1,8 @@
 import {NativeDateAdapter} from './native-date-adapter';
+import {Platform} from '../platform/index';
+
+
+const SUPPORTS_INTL = typeof Intl != 'undefined';
 
 
 // When constructing a Date, the month is zero-based. This can be confusing, since people are
@@ -9,9 +13,11 @@ const JAN = 0, FEB = 1, MAR = 2, APR = 3, MAY = 4, JUN = 5, JUL = 6, AUG = 7, SE
 
 describe('NativeDateAdapter', () => {
   let adapter;
+  let platform;
 
   beforeEach(() => {
     adapter = new NativeDateAdapter();
+    platform = new Platform();
   });
 
   it('should get year', () => {
@@ -44,16 +50,30 @@ describe('NativeDateAdapter', () => {
   });
 
   it('should get narrow month names', () => {
-    expect(adapter.getMonthNames('narrow')).toEqual([
-      'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'
-    ]);
+    // Edge & IE use same value for short and narrow.
+    if (platform.EDGE || platform.TRIDENT) {
+      expect(adapter.getMonthNames('narrow')).toEqual([
+        'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+      ]);
+    } else {
+      expect(adapter.getMonthNames('narrow')).toEqual([
+        'J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'
+      ]);
+    }
   });
 
   it('should get month names in a different locale', () => {
     adapter.setLocale('ja-JP');
-    expect(adapter.getMonthNames('long')).toEqual([
-      '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
-    ]);
+    if (SUPPORTS_INTL) {
+      expect(adapter.getMonthNames('long')).toEqual([
+        '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'
+      ]);
+    } else {
+      expect(adapter.getMonthNames('long')).toEqual([
+        'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
+        'October', 'November', 'December'
+      ]);
+    }
   });
 
   it('should get date names', () => {
@@ -65,11 +85,18 @@ describe('NativeDateAdapter', () => {
 
   it('should get date names in a different locale', () => {
     adapter.setLocale('ja-JP');
-    expect(adapter.getDateNames()).toEqual([
-      '1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日',
-      '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日',
-      '25日', '26日', '27日', '28日', '29日', '30日', '31日'
-    ]);
+    if (SUPPORTS_INTL) {
+      expect(adapter.getDateNames()).toEqual([
+        '1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日',
+        '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日',
+        '25日', '26日', '27日', '28日', '29日', '30日', '31日'
+      ]);
+    } else {
+      expect(adapter.getDateNames()).toEqual([
+        '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17',
+        '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'
+      ]);
+    }
   });
 
   it('should get long day of week names', () => {
@@ -85,14 +112,29 @@ describe('NativeDateAdapter', () => {
   });
 
   it('should get narrow day of week names', () => {
-    expect(adapter.getDayOfWeekNames('narrow')).toEqual(['S', 'M', 'T', 'W', 'T', 'F', 'S']);
+    // Edge & IE use two-letter narrow days.
+    if (platform.EDGE || platform.TRIDENT) {
+      expect(adapter.getDayOfWeekNames('narrow')).toEqual([
+        'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'
+      ]);
+    } else {
+      expect(adapter.getDayOfWeekNames('narrow')).toEqual([
+        'S', 'M', 'T', 'W', 'T', 'F', 'S'
+      ]);
+    }
   });
 
   it('should get day of week names in a different locale', () => {
     adapter.setLocale('ja-JP');
-    expect(adapter.getDayOfWeekNames('long')).toEqual([
-      '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'
-    ]);
+    if (SUPPORTS_INTL) {
+      expect(adapter.getDayOfWeekNames('long')).toEqual([
+        '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'
+      ]);
+    } else {
+      expect(adapter.getDayOfWeekNames('long')).toEqual([
+        'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'
+      ]);
+    }
   });
 
   it('should get year name', () => {
@@ -101,7 +143,11 @@ describe('NativeDateAdapter', () => {
 
   it('should get year name in a different locale', () => {
     adapter.setLocale('ja-JP');
-    expect(adapter.getYearName(new Date(2017, JAN, 1))).toBe('2017年');
+    if (SUPPORTS_INTL) {
+      expect(adapter.getYearName(new Date(2017, JAN, 1))).toBe('2017年');
+    } else {
+      expect(adapter.getYearName(new Date(2017, JAN, 1))).toBe('2017');
+    }
   });
 
   it('should get first day of week', () => {
@@ -136,7 +182,7 @@ describe('NativeDateAdapter', () => {
   });
 
   it('should parse string', () => {
-    expect(adapter.parse('1/1/17')).toEqual(new Date(2017, JAN, 1));
+    expect(adapter.parse('1/1/2017')).toEqual(new Date(2017, JAN, 1));
   });
 
   it('should parse number', () => {
@@ -155,17 +201,41 @@ describe('NativeDateAdapter', () => {
   });
 
   it('should format', () => {
-    expect(adapter.format(new Date(2017, JAN, 1))).toEqual('1/1/2017');
+    if (SUPPORTS_INTL) {
+      expect(adapter.format(new Date(2017, JAN, 1))).toEqual('1/1/2017');
+    } else {
+      expect(adapter.format(new Date(2017, JAN, 1))).toEqual('Sun Jan 01 2017');
+    }
   });
 
   it('should format with custom format', () => {
-    expect(adapter.format(new Date(2017, JAN, 1), {year: 'numeric', month: 'long', day: 'numeric'}))
-        .toEqual('January 1, 2017');
+    if (SUPPORTS_INTL) {
+      expect(adapter.format(new Date(2017, JAN, 1), {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      })).toEqual('January 1, 2017');
+    } else {
+      expect(adapter.format(new Date(2017, JAN, 1), {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      })).toEqual('Sun Jan 01 2017');
+    }
   });
 
   it('should format with a different locale', () => {
     adapter.setLocale('ja-JP');
-    expect(adapter.format(new Date(2017, JAN, 1))).toEqual('2017/1/1');
+    if (SUPPORTS_INTL) {
+      // Edge & IE use a different format in Japanese.
+      if (platform.EDGE || platform.TRIDENT) {
+        expect(adapter.format(new Date(2017, JAN, 1))).toEqual('2017年1月1日');
+      } else {
+        expect(adapter.format(new Date(2017, JAN, 1))).toEqual('2017/1/1');
+      }
+    } else {
+      expect(adapter.format(new Date(2017, JAN, 1))).toEqual('Sun Jan 01 2017');
+    }
   });
 
   it('should add years', () => {

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

@@ -56,31 +56,31 @@ export class NativeDateAdapter extends DateAdapter<Date> {
   getMonthNames(style: 'long' | 'short' | 'narrow'): string[] {
     if (SUPPORTS_INTL_API) {
       let dtf = new Intl.DateTimeFormat(this.locale, {month: style});
-      return range(12, i => dtf.format(new Date(2017, i, 1)));
+      return range(12, i => this._stripDirectionCharacters(dtf.format(new Date(2017, i, 1))));
     }
     return DEFAULT_MONTH_NAMES[style];
   }
 
   getDateNames(): string[] {
     if (SUPPORTS_INTL_API) {
       let dtf = new Intl.DateTimeFormat(this.locale, {day: 'numeric'});
-      return range(31, i => dtf.format(new Date(2017, 0, i + 1)));
+      return range(31, i => this._stripDirectionCharacters(dtf.format(new Date(2017, 0, i + 1))));
     }
     return DEFAULT_DATE_NAMES;
   }
 
   getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[] {
     if (SUPPORTS_INTL_API) {
       let dtf = new Intl.DateTimeFormat(this.locale, {weekday: style});
-      return range(7, i => dtf.format(new Date(2017, 0, i + 1)));
+      return range(7, i => this._stripDirectionCharacters(dtf.format(new Date(2017, 0, i + 1))));
     }
     return DEFAULT_DAY_OF_WEEK_NAMES[style];
   }
 
   getYearName(date: Date): string {
     if (SUPPORTS_INTL_API) {
       let dtf = new Intl.DateTimeFormat(this.locale, {year: 'numeric'});
-      return dtf.format(date);
+      return this._stripDirectionCharacters(dtf.format(date));
     }
     return String(this.getYear(date));
   }
@@ -131,9 +131,9 @@ export class NativeDateAdapter extends DateAdapter<Date> {
   format(date: Date, displayFormat: Object): string {
     if (SUPPORTS_INTL_API) {
       let dtf = new Intl.DateTimeFormat(this.locale, displayFormat);
-      return dtf.format(date);
+      return this._stripDirectionCharacters(dtf.format(date));
     }
-    return date.toDateString();
+    return this._stripDirectionCharacters(date.toDateString());
   }
 
   addCalendarYears(date: Date, years: number): Date {
@@ -188,4 +188,15 @@ export class NativeDateAdapter extends DateAdapter<Date> {
   private _2digit(n: number) {
     return ('00' + n).slice(-2);
   }
+
+  /**
+   * Strip out unicode LTR and RTL characters. Edge and IE insert these into formatted dates while
+   * other browsers do not. We remove them to make output consistent and because they interfere with
+   * date parsing.
+   * @param s The string to strip direction characters from.
+   * @returns {string} The stripped string.
+   */
+  private _stripDirectionCharacters(s: string) {
+    return s.replace(/[\u200e\u200f]/g, '');
+  }
 }

src/lib/datepicker/datepicker-input.ts

@@ -8,7 +8,7 @@ import {
   Input,
   OnDestroy,
   Optional,
-  Renderer
+  Renderer2
 } from '@angular/core';
 import {MdDatepicker} from './datepicker';
 import {
@@ -91,7 +91,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   set value(value: D) {
     let date = this._dateAdapter.parse(value, this._dateFormats.parse.dateInput);
     let oldDate = this.value;
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'value',
+    this._renderer.setProperty(this._elementRef.nativeElement, 'value',
         date ? this._dateAdapter.format(date, this._dateFormats.display.dateInput) : '');
     if (!this._dateAdapter.sameDate(oldDate, date)) {
       this._valueChange.emit(date);
@@ -153,7 +153,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   constructor(
       private _elementRef: ElementRef,
-      private _renderer: Renderer,
+      private _renderer: Renderer2,
       @Optional() private _dateAdapter: DateAdapter<D>,
       @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats,
       @Optional() private _mdInputContainer: MdInputContainer) {
@@ -214,7 +214,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   // Implemented as part of ControlValueAccessor
   setDisabledState(disabled: boolean): void {
-    this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', disabled);
+    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', disabled);
   }
 
   _onKeydown(event: KeyboardEvent) {