From c09e8a7eb37c4a56d7ce5bd372559d3962c4f3d9 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sun, 9 Jul 2017 07:23:06 +0200 Subject: [PATCH] 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. --- .../core/datetime/native-date-adapter.spec.ts | 56 +++++++++++++++---- src/lib/core/datetime/native-date-adapter.ts | 7 +++ src/lib/datepicker/datepicker.md | 13 +++++ src/lib/datepicker/datepicker.spec.ts | 7 --- src/lib/datepicker/month-view.spec.ts | 7 --- src/lib/datepicker/year-view.spec.ts | 7 --- 6 files changed, 64 insertions(+), 33 deletions(-) diff --git a/src/lib/core/datetime/native-date-adapter.spec.ts b/src/lib/core/datetime/native-date-adapter.spec.ts index 0e55b872aad2..fcde1c3bcea0 100644 --- a/src/lib/core/datetime/native-date-adapter.spec.ts +++ b/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); + }); + +}); diff --git a/src/lib/core/datetime/native-date-adapter.ts b/src/lib/core/datetime/native-date-adapter.ts index 7a371c6af61c..e6d27bc418ac 100644 --- a/src/lib/core/datetime/native-date-adapter.ts +++ b/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(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 { + constructor(@Optional() @Inject(LOCALE_ID) localeId: any) { + super(); + super.setLocale(localeId); + } + getYear(date: Date): number { return date.getFullYear(); } diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md index 8d1feb401717..16939027d70d 100644 --- a/src/lib/datepicker/datepicker.md +++ b/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 diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index 5acbd8fe3d0b..74d647383080 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/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, diff --git a/src/lib/datepicker/month-view.spec.ts b/src/lib/datepicker/month-view.spec.ts index aae098c596d5..220d81903bf0 100644 --- a/src/lib/datepicker/month-view.spec.ts +++ b/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, diff --git a/src/lib/datepicker/year-view.spec.ts b/src/lib/datepicker/year-view.spec.ts index d81a1978ce11..dfd8e8b71d7c 100644 --- a/src/lib/datepicker/year-view.spec.ts +++ b/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,