Customize angular material date picker

In projects sometimes we need to change the date format. The default format shown by the material date-picker is as per the English us (en-US).

default en-US date format

PS: The installation step of material in the project is not included in the blog. Please refer to the material site for step by step process

Change the default date format in the date-picker textbox

date-picker #1

This could be done using custom date formats. Using luxon here but it could be moment, date-fns, a js native date, or any other date library.

let's install library luxon adapter from the material team and luxon library

After this, there might be errors for types in that case install the type defintion

Let's add a date format for input dates and then inject this format in a component where a different format is required. In a project, there could be multiple formats used across a website.

changed properties-

display {dateInput: ‘EEE, DDD’ } — changes the date in the input of the date picker (refer date-picker#1 image)

display {monthYearLabel: ‘LLL yy’} — in a calendar popup changes the year to only last two digits.

calendar pop-up #2

Refer to the luxon formatting page for other available date fomats.

default locale has been set to English India (en-IN) it could be other languages as well. It will come under i18n and will not be possible to cover here.

Extend DateAdpater

If you need to do more customization like the calendar view and week name that could be done by extending NativeDateAdapter (js date), LuxonDateAdapter, or any extension of the class DateAdapter.

As you notice above once the class has been provided AppDateAdapter and in this class, the week name has been modified. the names in the calendar pop-up show as S(1). It is just a concept to show extension is possible.

when the style is narrow then add a number next to the week name

Hope this inspires you to do more extensions.