Skip to content

Commit

Permalink
feat(native-date-adapter): use default locale from LOCALE_ID
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 angular#5393.
  • Loading branch information
crisbeto committed Jun 29, 2017
1 parent f73cc97 commit fdc5031
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,4 +1,6 @@
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';


Expand All @@ -12,13 +14,18 @@ const JAN = 0, FEB = 1, MAR = 2, APR = 3, MAY = 4, JUN = 5, JUL = 6, AUG = 7, SE


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 @@ -202,9 +209,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 @@ -229,12 +236,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 @@ -297,3 +304,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 @@ -125,6 +125,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 @@ -34,13 +34,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 @@ -18,13 +18,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 @@ -18,13 +18,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 fdc5031

Please sign in to comment.