This code snippet demonstrates how to implement a custom date format in Angular Material DatePicker.
<mat-form-field>
<input matInput placeholder=”Select Date” [matDatepicker]=”datepickerRef” name=”datepicker” ngModel #dateCtrl=”ngModel” required readonly/>
<mat-datepicker-toggle [for]=”datepickerRef” matSuffix></mat-datepicker-toggle>
<mat-datepicker #datepickerRef></mat-datepicker>
<mat-error *ngIf=”dateCtrl.errors?.required && deptCtrl.touched”>Choose a Date</mat-error>
</mat-form-field>
The code above is from the file format-datepicker.ts, which includes a helper function for formatting dates.
import { NativeDateAdapter } from ‘@angular/material’;
import { MatDateFormats } from ‘@angular/material/core’;
export class AppDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
if (displayFormat === ‘input’) {
let day: string = date.getDate().toString();
day = +day < 10 ? ‘0’ + day : day;
let month: string = (date.getMonth() + 1).toString();
month = +month < 10 ? ‘0’ + month : month;
let year = date.getFullYear();
return `${day}-${month}-${year}`;
}
return date.toDateString();
}
}
export const APP_DATE_FORMATS: MatDateFormats = {
parse: {
dateInput: { month: ‘short’, year: ‘numeric’, day: ‘numeric’ },
},
display: {
dateInput: ‘input’,
monthYearLabel: { year: ‘numeric’, month: ‘numeric’ },
dateA11yLabel: { year: ‘numeric’, month: ‘long’, day: ‘numeric’
},
monthYearA11yLabel: { year: ‘numeric’, month: ‘long’ },
}
};
To use this implementation, include it within the providers tag as shown below:
import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core';
import { AppDateAdapter, APP_DATE_FORMATS } from 'src/app/shared/format-datepicker';
@Component({
providers: [
{provide: DateAdapter, useClass: AppDateAdapter},
{provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}
]
})
For more details on this implementation, refer to the article at
here.
It has been tested and verified to work successfully!