Angular DatePicker Tips

Set Custom Format and Using UTC for DatePicker

in Component (TS)

import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDatepickerInputEvent} from '@angular/material/datepicker';

export const MY_DATA_FORMATS = {
  parse: {
    dateInput: 'YYYY-MM-DD',
  },
  display: {
    dateInput: 'YYYY-MM-DD',
    monthYearLabel: 'YYYY MMM',
    dateA11yLabel: 'YYYY-MM-DD',
    monthYearA11yLabel: 'YYYY MMM',
  },
};


@Component({

providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]},
    {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
    {provide: MAT_DATE_FORMATS, useValue: MY_DATA_FORMATS}
  ]

In Component Template

 <mat-form-field>
  <input matInput [matDatepicker]="itemStartDate" placeholder="Start Date" (dateChange)="onDateChangeEvent('start', $event)"
         [formControl]="startDateCtrl" [min]="startDateMin" [max]="startDateMax">
  <mat-datepicker-toggle matSuffix [for]="itemStartDate"></mat-datepicker-toggle>
  <mat-datepicker #itemStartDate disabled="false"></mat-datepicker>
</mat-form-field>