DEV Community

Lakshya Thakur
Lakshya Thakur

Posted on

Creating a custom date-time picker using Angular Material

My requirement was very specific so I am going to talk in terms of mm/dd/yyyy, hh:mm:ss input field format i.e. in the same field you must be able to edit date and time and also choose a calendar view with time fields as well besides date.

๐Ÿ“Œ For date selection, choose <mat-calendar> instead of <mat-datepicker>.

๐Ÿ“Œ Create a time component with input fields for hours, seconds and minutes.

๐Ÿ“Œ Smash them together inside one div and show/hide it using boolean values on an icon click to the right of input field.

๐Ÿ“Œ Setup a form group with date, time and input form controls (Yes reactive forms is the way)

๐Ÿ“Œ Since our input field is plain text , we need to have a regex to validate above stated format.

๐Ÿ“Œ Post successful validation comes the splitting of input field content to retrieve date and time content and set it to date and time formcontrols.

๐Ÿ“Œ Similarly for any date or time change through calendar view, update the input formcontrol.

P.S. - Refer github for <mat-calendar> instead of angular material docs.

Discussion (0)