datepicker: startAt and setting value doesn't work correctly

[fxck]

repro (using mmalerba:dp-a11y):

• predefine value to 2017-05-02 (YYYY-MM-DD), input shows correctly 02/05/2017
• open datepicker, it opens on a wrong month (second, instead of the fifth)
• select 6th day of the second month (that was open), input changes to 06/02/2017 (should have been 06/05/2017)
• close and open input again, selected day is set to second of february, but calendar opens at sixth month

@mmalerba

[mmalerba]

This is a limitation of the native JS Date object since It's not possible to set a parse format. We are planning to add a MomentDateAdapter soon (and corresponding MD_MOMENT_DATE_FORMATS) that will work with moment.js, a library that has more robust date parsing and formatting.

If you don't want to use moment, it's easy to write your own adapter for whatever date implementation you want

[fxck]

Hmm, right. I've already written my own date-fns adapter, but apparently it cannot parse different formats either... yet anyway - date-fns/date-fns#375

But doesn't this basically mean that you won't able to use locale out of the box unless you use momentjs, which is absolutely humongous untreeshakable lib? Wouldn't it be worth shipping with an adapter that can do actually this?

[mmalerba]

Happy to consider adding adapters for other implementations, but implementing robust internationalized date parsing and formatting is outside the scope of Angular Material. NativeDateAdapter is provided for users who need a very basic implementation that doesn't depend on any additional libraries, but in most cases people will want to use the moment adapter or create their own.

[mmalerba]

Closing this since its WAI for NativeDateAdapter.

[fxck]

@mmalerba these issues will keep piling on, I think it would be worth adding some all caps bold statement to calendar docs that it doesn't support any other locale than those with MM-DD-YYYY formats.

[emreavsar]

I cannot understand how you guys from material are not providing at least one MomentDateAdapter, so that everyone can use a basic version of i18nalized date-pickers. I know there are ways to implement it, but only supporting MM-DD-YYYY out of the box is not enough.

[mmalerba]

@emreavsar We plan to offer a Moment adapter, we have some issues to resolve with our packaging structure before we can do that. We don't want to force a Moment.js dependency on people who aren't even using the adapter

[emreavsar]

Of course i see your point. Hope to see the adapter, maybe you can give it as a separate material-datepicker-extension package or so? Cheers

…

On Wed, 31 May 2017 at 18:42, mmalerba ***@***.***> wrote: @emreavsar <https://github.com/emreavsar> We plan to offer a Moment adapter, we have some issues to resolve with our packaging structure before we can do that. We don't want to force a Moment.js dependency on people who aren't even using the adapter — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4358 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA5mlqfNWZlZ4aflJ4duKxrh2l_jY6zNks5r_Zh-gaJpZM4NON_M> .

[mzernetsch]

Found a simple workaround that works for my use-case.
I set the startAt property to the date i provide as ngModel.
Now (using german locale) the datepicker will open at the correct month.

  <md-input-container>
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="date">
      <button mdSuffix [mdDatepickerToggle]="picker"></button>
    </md-input-container>
  <md-datepicker #picker [startAt]="date"></md-datepicker>

[fxck]

At the time of writing this startAt didn't require Date object, which was part of the problem, the other is, that after you select a day, using german locale and then close and open the calendar again, it will be on a wrong month.

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