Skip to content

Commit

Permalink
feat(native-date-adapter): use default locale from LOCALE_ID (#5419)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto authored and mmalerba committed Jul 9, 2017
1 parent 6583505 commit c09e8a7
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 33 deletions.
56 changes: 44 additions & 12 deletions src/lib/core/datetime/native-date-adapter.spec.ts
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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');
}
});

Expand All @@ -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');
}
});

Expand Down Expand Up @@ -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);
});

});
7 changes: 7 additions & 0 deletions src/lib/core/datetime/native-date-adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';


Expand Down Expand Up @@ -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();
}
Expand Down
13 changes: 13 additions & 0 deletions src/lib/datepicker/datepicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 0 additions & 7 deletions src/lib/datepicker/datepicker.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
7 changes: 0 additions & 7 deletions src/lib/datepicker/month-view.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
7 changes: 0 additions & 7 deletions src/lib/datepicker/year-view.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit c09e8a7

Please sign in to comment.