Angular Material Date Picker

In this lecture we'll take a look at date picker component in angular material, The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made up of several components and directives that work together.

First step in material.module.ts file let's import tow modules MatDatepickerModule and MatNativeDateModule and add those two modules to the MaterialComponents[] array.

import { MatDatepickerModule } from "@angular/material";

const MaterialComponents = [
  MatDatepickerModule
];

Now we can create our first datepicker, a date picker is basically composed of text box and a calender pop-up in. So let's jump into our HTML, start off with form field and within this component add an input element, we are going to attach an icon which will open the calender pop-up, the component for the icon is mat-datepicker-toggle and we'll add the matSuffix attribute, now that we have the input and a datepicker toggle we now need the actual datepicker component, the component to use is mat-datepicker and now we need to link all the three together. Let's add a reference variable on mat-datepicker and on the input element add the matDatepicker and bind it with the reference variable finally on mat-datepicker-toggle add the for property and bind it to the reference variable again, here is the code for that.

<mat-form-field>
  <input matInput [matDatepicker]="myDatepicker" />
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker></mat-datepicker>
</mat-form-field>

Save the files and take look at the browser we should have an input element suffixed with an icon datepicker angular material When you click on that icon a calender pops up with today's date selected click on the date and the value is saved to the input element, you can also go back and choose between the months or also directly jump to a particular year, you can even enter a date in the input element.

So as you can see this was a basic datepicker in angular material. it's time to take a look at the different configurations possible for this datepicker.

angular material: datepicker configurations

The first datepicker configuration is regarding to the starting view of the calender by default it will open the month view, we can change that using the start view probability so on mat-datepicker component let's add the startView and you can set it to year instead of month.

<mat-form-field>
  <input matInput [matDatepicker]="myDatepicker" />
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker startView="year"></mat-datepicker>
</mat-form-field>

datepicker configurations As you can see it displays the months of the year.

You can also set it to multi-year in which case it displays multiple years. datepicker multi-year

datepicker min and max dates

Another typical requirement when working with datepickers is setting a minimun and maximun date that the user can select. We can easily do that with the min and max properties, so in the component class in app.component.ts create two date objects, the minDate is today's date and maxDate is 2020/0/1 the parameters ad like this Date(year,month,day) also please make a note tha month starts from 0 wo in this case the max date is set to January 1st 2020. see the full code bellow.

export class AppComponent implements OnInit {
  minDate = new Date();
  maxDate = new Date(2020, 0, 1);
}

Now that we have the min and max dates we can bind it to the input component using min and max properties.

<mat-form-field>
  <input
    matInput
    [matDatepicker]="myDatepicker"
    [min]="minDate"
    [max]="maxDate"
  />
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker startView="month"></mat-datepicker>
</mat-form-field>

angular material datepicker min and max You should be allowed to select dates starting from today's date till 1st January 2020, you'll not be able to select any other dates.

datepicker filter out dates

Another requirement is when you have to filter out certain dates for example let's say a user should not be able to pick Saturdays and Sundays, you can do that by using the matDatepickerFilter property of the datepicker input.

So in the component class you'll nedd to create a filter function, we'll extract just the day and then we're preventing Saturdays and Sundays from being selected, here is the code.

export class AppComponent implements OnInit {
  dateFilter = date => {
    const day = date.getDay();
    return day != 0 && day != 6;
  };
}

Now in the HTML on the input element set matDatepickerFilter to equal our function dateFilter

<mat-form-field>
  <input
    matInput
    [matDatepicker]="myDatepicker"
    [matDatepickerFilter]="dateFilter"
  />
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker startView="month"></mat-datepicker>
</mat-form-field>

angular material datepicker filter dates If you save and have a look at the browser you can see that all the Saturdays and Sundays are disabled you can select only the weekdays.

Alright that is pretty much the basics of datepicker in angular material.