Material example for customizing-the-parse-and-display-formats for date picker uses custom MAT_DATE_FORMATS
export const MY_FORMATS = { parse: { dateInput: 'LL', }, display: { dateInput: 'LL', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', }, };
I could not find where and how these fields like dateA11yLabel
will come into play. What I could figure out was display.dateInput
is used in displaying selected date on calendar and display.monthYearLabel
is used in the select drop-down of year selector.
dateA11yLabel: What is read by a screen reader when using the arrow keys to move day-by-day through the datepicker calendar view.
How to change Mat-Datepicker date format to DD/MM/YYYY in simplest way? First, bind the format to your mat-datepicker. export const MY_FORMATS = { parse: { dateInput: 'LL' }, display: { dateInput: 'YYYY-MM-DD', monthYearLabel: 'YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'YYYY' } };
Well, I figured out the following:
parse: { dateInput: 'DD.MM.YYYY', }, display: { dateInput: 'DD.MM.YYYY', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM-YYYY', },
with parse.dateInput
: you can let the user enter any type of date with any format, and the date adapter will reformat it to the format you specify in this attribute
with display.dateInput
you can specify the input date format (marked with 1)
display.monthYearLabel
you can specify the area marked with 2
unfortunately, I still don't know about the rest!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With