diff --git a/src/lib/core/datetime/date-adapter.ts b/src/lib/core/datetime/date-adapter.ts index 407ed09daeec..24172405d036 100644 --- a/src/lib/core/datetime/date-adapter.ts +++ b/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('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 { /** The locale to use for all dates. */ diff --git a/src/lib/core/datetime/index.ts b/src/lib/core/datetime/index.ts index bdacc4d1f010..e16c8b39b197 100644 --- a/src/lib/core/datetime/index.ts +++ b/src/lib/core/datetime/index.ts @@ -7,12 +7,11 @@ */ 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'; @@ -20,7 +19,10 @@ export * from './native-date-formats'; @NgModule({ - providers: [{provide: DateAdapter, useClass: NativeDateAdapter}], + providers: [ + {provide: DateAdapter, useClass: NativeDateAdapter}, + MAT_DATE_LOCALE_PROVIDER + ], }) export class NativeDateModule {} diff --git a/src/lib/core/datetime/native-date-adapter.spec.ts b/src/lib/core/datetime/native-date-adapter.spec.ts index 7f9931310614..cc03629e724e 100644 --- a/src/lib/core/datetime/native-date-adapter.spec.ts +++ b/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']; diff --git a/src/lib/core/datetime/native-date-adapter.ts b/src/lib/core/datetime/native-date-adapter.ts index ce1a2c77653d..6eb459c17206 100644 --- a/src/lib/core/datetime/native-date-adapter.ts +++ b/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(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 { - constructor(@Optional() @Inject(LOCALE_ID) localeId: any) { + constructor(@Optional() @Inject(MAT_DATE_LOCALE) matDateLocale: string) { super(); - super.setLocale(localeId); + super.setLocale(matDateLocale); } /** diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md index a0d624f8d01f..b91d40265db4 100644 --- a/src/lib/datepicker/datepicker.md +++ b/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 {}