fix(datepicker): Create a new injection token to avoid overriding LOCALE_ID (#6708)

Author: jwshinjwshin

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

@@ -6,6 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {InjectionToken, LOCALE_ID} from '@angular/core';
+
+/** InjectionToken for datepicker that can be used to override default locale code. */
+export const MAT_DATE_LOCALE = new InjectionToken<string>('MAT_DATE_LOCALE');
+
+/** Provider for MAT_DATE_LOCALE injection token. */
+export const MAT_DATE_LOCALE_PROVIDER = {provide: MAT_DATE_LOCALE, useExisting: LOCALE_ID};
+
 /** Adapts type `D` to be usable as a date by cdk-based components that work with dates. */
 export abstract class DateAdapter<D> {
   /** The locale to use for all dates. */

src/lib/core/datetime/index.ts

@@ -7,20 +7,22 @@
  */
 
 import {NgModule} from '@angular/core';
-import {DateAdapter} from './date-adapter';
+import {DateAdapter, MAT_DATE_LOCALE_PROVIDER} from './date-adapter';
 import {NativeDateAdapter} from './native-date-adapter';
 import {MD_DATE_FORMATS} from './date-formats';
 import {MD_NATIVE_DATE_FORMATS} from './native-date-formats';
 
-
 export * from './date-adapter';
 export * from './date-formats';
 export * from './native-date-adapter';
 export * from './native-date-formats';
 
 
 @NgModule({
-  providers: [{provide: DateAdapter, useClass: NativeDateAdapter}],
+  providers: [
+    {provide: DateAdapter, useClass: NativeDateAdapter},
+    MAT_DATE_LOCALE_PROVIDER
+  ],
 })
 export class NativeDateModule {}
 

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

@@ -1,8 +1,8 @@
 import {TestBed, async, inject} from '@angular/core/testing';
-import {LOCALE_ID} from '@angular/core';
-import {NativeDateAdapter, NativeDateModule, DateAdapter} from './index';
+import {NativeDateAdapter, NativeDateModule, DateAdapter, MAT_DATE_LOCALE} from './index';
 import {Platform} from '../platform/index';
 import {DEC, FEB, JAN, MAR} from '../testing/month-constants';
+import {LOCALE_ID} from '@angular/core';
 
 const SUPPORTS_INTL = typeof Intl != 'undefined';
 
@@ -334,6 +334,30 @@ describe('NativeDateAdapter', () => {
 });
 
 
+describe('NativeDateAdapter with MAT_DATE_LOCALE override', () => {
+  let adapter: NativeDateAdapter;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NativeDateModule],
+      providers: [{provide: MAT_DATE_LOCALE, useValue: 'da-DK'}]
+    }).compileComponents();
+  }));
+
+  beforeEach(inject([DateAdapter], (d: NativeDateAdapter) => {
+    adapter = d;
+  }));
+
+  it('should take the default locale id from the MAT_DATE_LOCALE 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);
+  });
+
+});
+
 describe('NativeDateAdapter with LOCALE_ID override', () => {
   let adapter: NativeDateAdapter;
 
@@ -348,7 +372,7 @@ describe('NativeDateAdapter with LOCALE_ID override', () => {
     adapter = d;
   }));
 
-  it('should take the default locale id from the LOCALE_ID injection token', () => {
+  it('should cascade locale id from the LOCALE_ID injection token to MAT_DATE_LOCALE', () => {
     const expectedValue = SUPPORTS_INTL ?
         ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'] :
         ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

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

@@ -6,11 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Inject, Injectable, Optional, LOCALE_ID} from '@angular/core';
-import {DateAdapter} from './date-adapter';
+import {Inject, Injectable, Optional} from '@angular/core';
+import {DateAdapter, MAT_DATE_LOCALE} from './date-adapter';
 import {extendObject} from '../util/object-extend';
 
-
 // TODO(mmalerba): Remove when we no longer support safari 9.
 /** Whether the browser supports the Intl API. */
 const SUPPORTS_INTL_API = typeof Intl != 'undefined';
@@ -48,13 +47,12 @@ function range<T>(length: number, valueFunction: (index: number) => T): T[] {
   return valuesArray;
 }
 
-
 /** 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) {
+  constructor(@Optional() @Inject(MAT_DATE_LOCALE) matDateLocale: string) {
     super();
-    super.setLocale(localeId);
+    super.setLocale(matDateLocale);
   }
 
   /**

src/lib/datepicker/datepicker.md

@@ -116,13 +116,14 @@ three pieces via injection:
  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:
+By default, the `MAT_DATE_LOCALE` injection token will use the existing `LOCALE_ID` locale code
+from `@angular/core`. If you want to override it, you can provide a new value for the
+`MAT_DATE_LOCALE` token:
 
 ```ts
 @NgModule({
   providers: [
-    {provide: LOCALE_ID, useValue: 'en-GB'},
+    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
   ],
 })
 export class MyApp {}