Angular Material DatetimePicker

DateTime Picker

A few days ago, I was searching for a datetimepicker. One of the main features we required is that it should be configurable as per our requirement.

Then I found one lib to fulfill my all requirements called mat-datetimepicker

-> Set up the project

Create a new angular project:

ng new datetimepicker

Move to the project folder and install these two libraries

npm i @mat-datetimepicker/moment
npm i @mat-datetimepicker/core

In app.module.ts file import, lib modules show in below code

after importing we need to write the form control name(datetimeCtrl) in the app.component.ts file

In the Datetimepicker HTML code, they provide customization like we choose mode(portrait mode, if we won't verticle mode just remove the mode in datetimepicker), we also set the time interval, etc…

Using the $theme variable from the pre-built theme you can call the theming function:

We can see the output of datetimepicker in the below image:

datetimepicker

Links:

• Output
• Github Code
• StackBlitz Example

Our datetimepicker has been created. You can also make it more customizable this datetimepicker based on parameters.

If you liked this post, give me some claps and follow me for more posts like this one. Be sure to leave a comment if you have any queries.

Happy Coding… 👏👏👏.