Angular 2 Material datepicker - change format and language

Question

I tried to follow the official documentation in the Angular Material website: https://material.angular.io/components/datepicker/overview

I want to change the language of the datepicker to Hebrew and change the format to dd/mm/yyyy.

this is my component.html:

<md-form-field class="full-width">
    <input
        (click)="picker.open()"
        [min]="minDate"
        [max]="maxDate"
        mdInput
        readonly
        [mdDatepicker]="picker"
        formControlName="date"
        placeholder="Choose Date">
    <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
    <md-datepicker touchUi="true" #picker></md-datepicker>
</md-form-field>

I tried was able to change the language to Hebrew by set the following settings in the component.ts file:

constructor(
    dateAdapter: DateAdapter<NativeDateAdapter>,
    ...
 ) {
    dateAdapter.setLocale('he-HE');
 }

now the language changed ( the name of the months and etc.) and the format changed to d/m/yyyy

the problem is that when the user choose for example 1.7.17 it means that he choose 1, September 2017 and if the user click on the datepicker again it shows him the calendar of January.

thank you for your help

Answer 1

You have to implement parse. I use moment.js library and here is my impl:

    @Injectable()
    export class MyDateAdapterService extends NativeDateAdapter {

      parse(value: any): Date | null {
        if (typeof value === 'number') {
          return new Date(value);
        }

        if (value) {
          const localeData = moment.localeData();
          const format = localeData.longDateFormat('L');
          return moment(value, format).toDate();
        } else {
          return null;
        }
      }
    }

You also have to change locale for moment like:

   moment.locale('fr');

and add your provider:

providers: [
  [{provide: DateAdapter, useClass: MyDateAdapterService}]
]