Angular Material 8 | Datepicker Tutorial with Examples

In this article, we will discuss how to add Datepicker using Angular Material in the project. Also, discuss some tricks to solve some basic challenges like

How to open Datepicker on Input focus?

How to Set Min and Max date in Datepicker?

Change Material Datepicker view to Year or Month by default.

Disable some of the dates or days in Datepicker calender.

Let’s start with a new Angular 8 project. Then we will install Angular Material 8 and do some configuration. If you already have a project up and running then directly jump to interesting part 🙂

First, make sure you have installed the latest version of Angular CLI & Core. We are going to create a new Angular project in latest version v8.0.6

Also, update NodeJS version 12+. Check your version of NodeJs by running $ node --version

Create a new Angular Application

Run following npm command to create a new project using ng CLI

 

Install Angular Material v8

As we are creating a v8 Angular project, so we need the same version for Angular Material. Run following NPM command to install Angular Material and it’s dependencies

 

Configure Material Animations

Next, open app.module.ts file to import BrowserAnimationsModule then add it in imports array to enable animation for Material components.

Add Material Theme

To add a theme of Material in the project, open styles.css file then import one of the theme file used to style Material components.

We are done with Angular material installation and configurations.

Add Datepicker and Other Modules

To use a Material component we need to import it into the app’s module. Here for our Datepicker, we will import some required modules.

MatInputModule: For adding an Input form control <input matInput />
MatDatepickerModule: For Datepicker to choose date from <mat-datepicker>
MatNativeDateModule: For Date formating (optional)
MatMomentDateModule: For Date formating to other locales
Now open the app.module.ts file, then import above modules then add in imports array as shown below:

Use Datepicker in Component[ps2id id=’use-material-datepicker’ target=”/]

Now we are ready to start testing our first and most basic Datepicker implementation in app.component.html file

Material Datepicker consists of two things, an input field, and a Calender popup. matDatepickerproperty is used to connect these two with a template variable(#picker).

Custom Toggle Icon

To toggle Calander popup, mat-datepicker-toggle is used to show/hide calendar which can have matDatepickerToggleIcon as a child to show custom icon.

Note: To use mat-icon, add MatIconModule in app.module.ts file’s imports array and also include following material icons google fonts in the index.html. Check more material icons here

Set Start Date in Calander

[startAt] property is used to set a start date on <mat-datepicker>


 

Change Calander Popup View

startView property of <mat-datepicker> can be used to show a month, year, or multi-year for selection where month is a default
startView=”year”
startView=”multi-year”

Datepicker Validation

Datepicker can have three types of validation properties Min, Max and matDatepickerFilter available for Input field control

Using Min & Max Dates

Using min and max properties of Input field we can ser a range of dates to make the selection available. A user cannot move before min and move after a max date.

Using Filter

matDatepickerFilter property of Input accepts a function which returns true or false for a date in calendar popup. If it returns false for a date it will be shown a disabled for selection.

Advantage of using Filter over Min, Max is that user can move over a period of dates even if disabled which is unlike behavior for previous validation.

Change Event for Datepicker

There are two events available for Input field (dateInput) and (dateChange)
(dateInput): Event fired when the user changes values by typing in Input or select date from the calendar
(dateChange): Event fired on blur after the user changes the value in Input and also after the date is changed from the calendar


 

ReadOnly or Disabled datepicker

disabled property can be added to all or any of the three <input>, <mat-datepicker-toggle> or <mat-datepicker>

To make it read-only or disabled just add it to all of them

 

Conclusion: So here we discussed Angular Material 8 Datepicker and it’s important properties available. We can also customize its template and have custom date format using momentjs. Check out more on docs here

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of