Help please set the default value in datepicker ng material 2

In my case, the datapicher itself is associated with the model as follows:

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

The component sets the model value as follows:

 export class DatepickerOverviewExample { private modelDateBegin = '02.07.2017'; }

As a result, the browser shows a datapyker, in which the value is preset: "07.02.2017". This is clearly not what was installed in the component.

A live example is here: PLUNKER

PS:

Moreover, if on the same page to use the second datapiker, then in the manner described above, the value in it is not set at all

    1 answer 1

    Most likely, the problem is in the date format, private modelDateBegin = '02.07.2017' - in the US format (MM/dd/yyyy) , where the month first comes, and then the day, it is February 7th and not July 2nd. The value will not be set if the date of the month is more than 12, for example, '15.07.2017' .

    • And where does such a format "MM / dd / yyyy" come from? Is it necessary to try at random? - cyklop77
    • Most likely the component has a format setting. And the default is the en-US date format, in which the date is written in this form: month / day / year. - koshe
    • Here is a description of the component and it shows how to change the date format. - koshe