Components: datepicker not properly displaying month

[robindijkhof]

Bug

What is the expected behavior?

Display the month as 'March'

What is the current behavior?

M03 is displayed

What are the steps to reproduce?

Check the example https://material.angular.io/components/component/datepicker

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

[fxck]

That depends on the locale you use.

[robindijkhof]

My locale is nl, but M03 doesn't seem like a correct month

[fxck]

Hard to tell, you didn't provide a plunker.

[robindijkhof]

https://plnkr.co/edit/1mhwobNRXjgUr3KM6U8e?p=preview

[fxck]

It doesn't seem like you are setting your locale to nl anywhere in that plunker.

[robindijkhof]

That's right and yet I am seeing M03. Chrome 58 and Chrome mobile. Any idea?

[fxck]

Maybe try actually setting your locale to nl?

this.dateAdapter.setLocale('nl');

[fxck]

https://plnkr.co/edit/o6ZuFmJ3Qk3Rr6Uuz8cA?p=preview

https://github.com/angular/material2/blob/master/src/lib/core/datetime/date-adapter.ts#L155

[fxck]

Its gotta be said though, that the datepicker might not work correctly after you do that.

Please note: MdNativeDateModule is based off of the functionality available in JavaScript's native Date object, and is thus not suitable for many locales. One of the biggest shortcomings of the native Date object is the inability to set the parse format. We highly recommend using a custom DateAdapter that works with the formatting/parsing library of your choice.

you can try and implement your own adapter

[robindijkhof]

Setting the locale fixed the problem. Not sure if it is working correclty though. I also tried setting the local in angular { provide: LOCALE_ID, useValue: 'nl' } But that didn't work. It would be nice if the datapicker used that value to.

[julianobrasil]

@fxck, maybe the component is in it's early stages, but a little improvement in its docs at material.angular.io would be nice. Things like this.dateAdapter.setLocale('nl') can save a lot of headaches. Or maybe examples like you provided above.

[fxck]

I'm not sure why it is not mentioned in the docs, perhaps because what I said, setting a locale using the adapter material provides "breaks" it. Ask @mmalerba.

[julianobrasil]

@fxck, it has at least one side efect (or a bug?): once you set the date and the input is updated, there's no garantee that the next time the datepicker is shown it will show the right period.

Here in Brazil, for example, the default date format is dd/MM/yyyy. If I just use this.dateAdapter.setLocale('pt-br') and then select, for exemple, April 12th 2017, it will show me, correctly, 12/04/2017. The next time I choose a date, it will show December in the date picker (because the day I chose before is 12).

If I select a day greater then twelve, it shows me the current month.

[robindijkhof]

So basically English or wrting your own dateAdapter is the way to go?

[ghost]

@ @julianobrasil https://plnkr.co/edit/ulSNTMTMZmORzvkVTvch?p=preview ,not work. i use it in the wrong way ?

[fxck]

@julianobrasil I know. https://github.com/angular/material2/issues/4358#issuecomment-299661961

[julianobrasil]

Ok. I took the code of material adapter and made some changes to fit to my particular case (just a small one at the parse function in the adapter).

[julianobrasil]

@stevenmi , there's no need for the providers: [NativeDateAdapter], you can take it away (and do the same to the injection of NativeDateAdapter in the AppModule class, unless you were just trying something else).

In the constructor of the App class, inject DateAdapter<Date>, just like it's shown in the example provided by fxck's plunker: https://plnkr.co/edit/o6ZuFmJ3Qk3Rr6Uuz8cA?p=preview (don't forget to import the DateAdapter module from Material).

Depending of the locale, it may or may not work right as said in this #4358 (comment). If this is your case, you'll have to build your own adapter. See your modified plunker: https://plnkr.co/edit/v24Y7pFNpAVZpM1UsTQH?p=preview

[ghost]

@julianobrasil thanks

[mmalerba]

Sounds like there are two things to do here:

• Add documentation for setLocale
• Default to angular's LOCALE_ID

[HopScotch47]

@mmalerba I would like to add something into the consideration.

I am also in one of the dd/mm/yyyy locales and therefore went and created a date adapter for momentjs since I already use this library in my project.

This all works fine as long as the locale stays the same within the application.
The parse function receives the format string from the override of MdDateFormats but this is a constant.

Now what I am trying to do, is to make it as flexible enough to be able to cater for other locales with different formats as well but don't really had a great idea on how to do that apart from ignoring the parse format altogether and handle this in the adapter itself.

Any thoughts?

[mmalerba]

@HopScotch47 with moment, just use one of the formats that supports multiple locales: https://momentjs.com/#multiple-locale-support If that's not good enough please open a separate issue describing your situation

[jotatoledo]

@HopScotch47 hey timo, Im currently trying to extend date adapter to use moment js in an application. Im struggling because of the lack of documentation and some weird errors. Were you able to made your custom implementation? Would you mind sharing some tips with me maybe?

[julianobrasil]

@jotatoledo, take a look at https://github.com/angular/material2/issues/675#issuecomment-302275678 from @arlowhite.

[jotatoledo]

@julianobrasil Thanks for the reply! I just finished my own version ahah, but it will come handy to take some ideas from the one you pointed out 😄

[mmalerba]

Unfortunately the current situation is pretty much that you have to create a custom DateAdapter for locales that use dd-mm-yyyy format. However we are going to do a couple things to make this better in the near future:

1. Use the new Angular i18n API that's currently being developed to make the NativeDateAdapter more robust and able to handle all locales (see #6030)
2. Ship additional pre-made DateAdapters with Angular Material to support Moment.js and date-fns out of the box (see #5972)

[angular-automatic-lock-bot[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._}