feat(native-date-adapter): use default locale from LOCALE_ID (#5419)

Uses the `LOCALE_ID` from `@angular/core` to determine the default locale in the `NativeDateAdapter`.

BREAKING CHANGE: Until now, the `NativeDateAdapter` was using the browser locale, however the `LOCALE_ID` appears to default to `en-US`.

Fixes #5393.

Author: crisbeto

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

@@ -1,17 +1,24 @@
-import {NativeDateAdapter} from './native-date-adapter';
+import {TestBed, async, inject} from '@angular/core/testing';
+import {LOCALE_ID} from '@angular/core';
+import {NativeDateAdapter, NativeDateModule, DateAdapter} from './index';
 import {Platform} from '../platform/index';
 import {DEC, FEB, JAN, MAR} from '../testing/month-constants';
 
 const SUPPORTS_INTL = typeof Intl != 'undefined';
 
 describe('NativeDateAdapter', () => {
-  let adapter;
-  let platform;
+  const platform = new Platform();
+  let adapter: NativeDateAdapter;
 
-  beforeEach(() => {
-    adapter = new NativeDateAdapter();
-    platform = new Platform();
-  });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NativeDateModule]
+    }).compileComponents();
+  }));
+
+  beforeEach(inject([DateAdapter], (d: NativeDateAdapter) => {
+    adapter = d;
+  }));
 
   it('should get year', () => {
     expect(adapter.getYear(new Date(2017, JAN, 1))).toBe(2017);
@@ -195,9 +202,9 @@ describe('NativeDateAdapter', () => {
 
   it('should format', () => {
     if (SUPPORTS_INTL) {
-      expect(adapter.format(new Date(2017, JAN, 1))).toEqual('1/1/2017');
+      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');
+      expect(adapter.format(new Date(2017, JAN, 1), {})).toEqual('Sun Jan 01 2017');
     }
   });
 
@@ -222,12 +229,12 @@ describe('NativeDateAdapter', () => {
     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日');
+        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');
+        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');
+      expect(adapter.format(new Date(2017, JAN, 1), {})).toEqual('Sun Jan 01 2017');
     }
   });
 
@@ -290,3 +297,28 @@ describe('NativeDateAdapter', () => {
         .toEqual(new Date(2018, FEB, 1));
   });
 });
+
+
+describe('NativeDateAdapter with LOCALE_ID override', () => {
+  let adapter: NativeDateAdapter;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NativeDateModule],
+      providers: [{provide: LOCALE_ID, useValue: 'da-DK'}]
+    }).compileComponents();
+  }));
+
+  beforeEach(inject([DateAdapter], (d: NativeDateAdapter) => {
+    adapter = d;
+  }));
+
+  it('should take the default locale id from the LOCALE_ID injection token', () => {
+    const expectedValue = SUPPORTS_INTL ?
+        ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'] :
+        ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+    expect(adapter.getDayOfWeekNames('long')).toEqual(expectedValue);
+  });
+
+});

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

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Inject, Injectable, Optional, LOCALE_ID} from '@angular/core';
 import {DateAdapter} from './date-adapter';
 
 
@@ -48,7 +49,13 @@ function range<T>(length: number, valueFunction: (index: number) => T): T[] {
 
 
 /** Adapts the native JS Date for use with cdk-based components that work with dates. */
+@Injectable()
 export class NativeDateAdapter extends DateAdapter<Date> {
+  constructor(@Optional() @Inject(LOCALE_ID) localeId: any) {
+    super();
+    super.setLocale(localeId);
+  }
+
   getYear(date: Date): number {
     return date.getFullYear();
   }

src/lib/datepicker/datepicker.md

@@ -104,6 +104,19 @@ three pieces via injection:
  2. The display and parse formats used by the datepicker.
  3. The message strings used in the datepicker's UI.
 
+#### Setting the locale code
+By default the datepicker will use the locale code from the `LOCALE_ID` injection token from
+`@angular/core`. If you want to override it, you can provide a new value for the token:
+
+```ts
+@NgModule({
+  providers: [
+    {provide: LOCALE_ID, useValue: 'en-GB'},
+  ],
+})
+export class MyApp {}
+```
+
 #### Choosing a date implementation and date format settings
 The datepicker was built to be date implementation agnostic. This means that it can be made to work
 with a variety of different date implementations. However it also means that developers need to make

src/lib/datepicker/datepicker.spec.ts

@@ -24,13 +24,6 @@ describe('MdDatepicker', () => {
           NoopAnimationsModule,
           ReactiveFormsModule,
         ],
-        providers: [
-          {provide: DateAdapter, useFactory: () => {
-            let adapter = new NativeDateAdapter();
-            adapter.setLocale('en-US');
-            return adapter;
-          }},
-        ],
         declarations: [
           DatepickerWithFilterAndValidation,
           DatepickerWithFormControl,

src/lib/datepicker/month-view.spec.ts

@@ -12,13 +12,6 @@ describe('MdMonthView', () => {
       imports: [
         MdNativeDateModule,
       ],
-      providers: [
-        {provide: DateAdapter, useFactory: () => {
-          let adapter = new NativeDateAdapter();
-          adapter.setLocale('en-US');
-          return adapter;
-        }}
-      ],
       declarations: [
         MdCalendarBody,
         MdMonthView,

src/lib/datepicker/year-view.spec.ts

@@ -12,13 +12,6 @@ describe('MdYearView', () => {
       imports: [
         MdNativeDateModule,
       ],
-      providers: [
-        {provide: DateAdapter, useFactory: () => {
-          let adapter = new NativeDateAdapter();
-          adapter.setLocale('en-US');
-          return adapter;
-        }}
-      ],
       declarations: [
         MdCalendarBody,
         MdYearView,