DEV Community

Lakshya Thakur
Lakshya Thakur

Posted on

1

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.

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay