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.
Top comments (0)