datepicker bugs when Primary language is different from the Region

[BaimosTechnologies]

Bug, feature request, or proposal:

Bug when the OS Primary language (English) is different from the Region (Germany)

1. The date object value is: "Tue Jul 04 2017 00:00:00 GMT+0200 (CEST)" - OK
2. It is is formatted in the input as: "04/07/2017" - Bug
3. When opening the datepicker it shows the month APR 2017 - Bug
4. In the datepicker the selected date is 4th of JUL 2017 - OK

What is the expected behavior?

2. Date should be formatted as: "07/04/2017"
3. When opening the datepicker it should show the month JUL 2017

What is the current behavior?

Bad formatting, and wrong month shown when opening the datepicker like this:

What are the steps to reproduce?

On MacOS goto Language & Region preferences -> Set English - Primary -> Select Region: Germany, like this:

Open Plunker template: https://plnkr.co/edit/29fGaJ8uUQNsYoWDeXk4?p=preview

Just select a date in the datepicker, it will be wrongly formatted and you will get the above behavior.

If you then match the Deutsch - Primary to the Region: Germany region all is OK. Same for English - Primary to the Region: United States, but not when you mix them up like above.

What is the use-case or motivation for changing an existing behavior?

Datepicker should consistently work with the system formats, also when Language doesn't match the region.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/core": "^4.2.3",
"@angular/material": "2.0.0-beta.7":
"typescript": "2.3.4"
MacOS Sierra
Chrome, Firefox, Safari

Is there anything else we should know?

[SebastianGiro]

We should be able to manually select the language of the datepicker too.

[julianobrasil]

Use the DateAdapter setLocale to select your region. Also build a custom date adapter to present it in the desired format.

Take a look at this plunker (working for Brazilian Portuguese): http://plnkr.co/edit/jc4Ywu?p=preview

If you search for datepicker here among the repo issues, you'll see a lot of topics with similar questions.

It's a component still under construction, so somethings aren't done yet, like timepiker and possibly a more flexible library to deal with dates, like Moment.js.

[BaimosTechnologies]

I don't want to hardcode it to a region or language just to solve it's internal bugs. The point on using this control is exactly because it automatically displays the systems date formats whatever they are.

Expecting a bug fix and no workarounds.

[julianobrasil]

@PhilipSultanescu, actually, this behavior is not really a bug, is a design choice of a flexible component in its very early stages of development (Material 2 is on beta.7 and the datepicker was first relased in beta.5 if I rebember it right - and of course they are improving it).

It is possible for you to try to detect the final user's browser locale (in a not reliable way, using navigator.userLanguage, navigator.language, navigator.browserLanguage or navigator.systemLanguage), but nowadays it's just a guess. The only way you can trust is to tell your component which locale you want. After doing that, you need to tell the component the formats you want, and give the user a way to change the language if he wants to (for some people in some situations, an automatically chosen language will always be wrong).

For now I think you're asking for a feature (automatic locale detection, I guess), not a bug. I'd like it too. Even if it fails in some cases, it's better to have a way to tell the component to gess the locale (the app developer would provide the user ways to change it later), than have nothing. If want to follow some of the discussions arround the component, take a look at this (and other comments of the conversation): #675 (comment)

[mmalerba]

#5419 will make the datepicker use the locale specified by angular's LOCALE_ID token by default. However this will not fix the parsing issue which is a limitation of JavaScript's native Date object which is used by the NativeDateAdapter for date parsing. You'll need to create your own DateAdapter (explained in docs: https://material.angular.io/components/datepicker/overview) or wait for material's official MomentDateAdapter which will use Moment.js for parsing and formatting.

[BaimosTechnologies]

Thanks, will give it a try today.

[mmalerba]

@PhilipSultanescu The NativeDateAdapter can serve as a good example, you can also just extend it and override the parse behavior with custom logic if you like: https://github.com/angular/material2/blob/master/src/lib/core/datetime/native-date-adapter.ts

[mestremuten]

IMHO still this is a design flaw.
The component internal value should be locale agnostic (ISO string, Date object, ...).
The presentation of this value should be locale aware.

Take for example native date input. All browsers in all locales use ISO string as value (YYYY-MM-DD), but every browser in every locale presents this value in the specific format.

Another example would be native number input. Value is always of type Number (xxx[.xxx]). But presentation varies for each locale (US: 1,234,567.89)(ES: 1.234.567,89).

[mmalerba]

@mestremuten the DateAdapter mechanism allows you to use whatever you want as the internal representation, native Date, string, number, a 3rd party library representation, you just have to make a DateAdapter for it

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}