Material component persian datepicker in angular 2

Angular2 Material Component has a DatePicker that shows the date in the default format.

And only support change local to "fa-IR".

How can I format it to show Persian Date?

The following steps should help:

1: load all required modules in module.ts:

import { MatDatepickerModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS,MAT_DATE_LOCALE} from '@angular/material/datepicker';

2: install jalali-moment using NPM:

 npm install jalali-moment

3: import jalali date in your app:

import * as moment from 'jalali-moment';

If you use system.js, you must declare it in system.config.js to run app

4: write a custom class to override default date format mechanism

export class CustomDateAdapter extends NativeDateAdapter {
  constructor(matDateLocale: string) {
    super(matDateLocale, new Platform());
  }
  format(date: Date, displayFormat: object): string {
    var faDate = moment(date.toDateString()).locale('fa').format('YYYY/MM/DD');
    return faDate;
  }
}

5: write a constant defining you custom date format

const MY_DATE_FORMATS = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' }
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'short' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
    monthYearA11yLabel: { year: 'numeric', month: 'long' }
  }
}

6: MatDatepickerModule must be added to your @NgModule. Edit your providers section in @NgModule to introduce the added class to your app:

@NgModule({
  imports: [
    MatDatepickerModule,
  ],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'fa-IR' },
    { provide: DateAdapter, useClass: CustomDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
  ],
})

7: Add the date picker to your html page:

<mat-form-field>
  <input #dateInput matInput [matDatepicker]="picker" [(ngModel)]="date" (change)="dateChange($event,dateInput,picker)" placeholder="انتخاب تاریخ">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

8: Also to datepicker pop up show date correctly when user change date input handly you must add below code and method to ts file that you put your datepicker control to its html file or template

add below method to handle input change event

 public dateChange(event: any, dateInput: any,picker:any) {
    var faDate = dateInput.value;
    moment.locale('fa');
    var enDateMomentFormat  = moment(faDate).locale('en');
    var enDate = new Date(enDateMomentFormat.toLocaleString());
    picker._validSelected = enDate;
    picker.startAt = enDate;
}

as date displayed by datepicker had problem, i forced to edit material.umd.js to corrected it. in address: node_modules/@angular/material/bundles/material.umd.js in line :10947 <==> also you can search for "MatMonthView.prototype._createWeekCells =" edit end lines of function as below

let displayValue = ariaLabel.split('/')[2];
this._weeks[this._weeks.length - 1]
    .push(new MatCalendarCell(i + 1, Number(displayValue), ariaLabel, enabled));