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.