Bug - Datepicker - Chrome - Months displayed in wrong format

[agpreynolds]

Bug

Default locale settings in chrome cause the datepicker to display months in an incorrect format
I suspect a default locale setting needs to be added in the date adapter

What is the expected behavior?

Months should be displayed e.g. 'May 2017'

What is the current behavior?

Months are displayed e.g. '2017 M05'

What are the steps to reproduce?

View the demo in chrome
https://material.angular.io/components/component/datepicker

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

Material beta5
OS: Ubuntu 17.04, Android (haven't tested on other OS's)
Browser: Chrome

[fxck]

You'll be able to set local yourself after this is merged in #4541 as long as it's one of MM-DD-YYYY locales, native adapter doesn't work properly with other formats #4358

[tmakin]

I just ran into this and fixed it by setting the locale explicitly in the app module.

export class AppModule {
  constructor(private dateAdapter:DateAdapter<Date>) {
    dateAdapter.setLocale('en-gb');
  }
}

And whilst debugging I found it useful to run these snippets in the chrome console to see what the Intl API was spitting out:

var dtf = new Intl.DateTimeFormat(undefined, {month: 'short'});
console.debug(dtf.format(new Date(2017,1,1)));

var dtf_gb = new Intl.DateTimeFormat('en-gb', {month: 'short'});
console.debug(dtf_gb.format(new Date(2017,1,1)));

See NativeDateAdaptor for more info. https://github.com/angular/material2/blob/master/src/lib/core/datetime/native-date-adapter.ts

[mmalerba]

Looks like this has been resolved. I'll just add that we do have a bug tracking some work to make NativeDateAdapter work with more locales: #6030

[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.}