Angular Material Datepicker

The DatePickerModule included in Angular Material allows users to input date through a visual calendar. This short tutorial will show you how to add datepickers to your Angular application using Angular Material.

This tutorial is part of a collection of Angular Material tutorials, you can find the list of all tutorials here.

Adding A Datepicker

We will start off this tutorial by adding a basic datepicker, <mat-datepicker>. Before we can add the datepicker to our application we first need to import all modules needed to our Angular module, let’s do that:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatNativeDateModule } from "@angular/material/core";
import { MatInputModule } from "@angular/material/input";
import { MatFormFieldModule } from "@angular/material/form-field";

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatInputModule,
    MatFormFieldModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now, we can add a datepicker to our application. In order to show a datepicker we need to combine multiple Angular Material components, directives and elements:

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" />
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

If we now run our application we see the datepicker and we can interact with it:

Date Range Picker

A common use-case for a datepicker is a travel booking form. When you want to book a vacation you often need to specify a start-date and an end-date. To solve this using our previous example we would need to have two datepickers, one for the start-date and one for the end-date, this is not the recommended way. Here, it is recommended to use a date range picker.

The date range picker, mat-date-range-picker, is included in the module MatDatepickerModule so we don’t need to import anything more.

Adding a date range picker is very similar to adding a basic datepicker, the only difference is that, here, we need to have two input elements, one for the start-date and one for the end-date. This is the HTML for the date range picker:

<mat-form-field>
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date" />
    <input matEndDate placeholder="End date" />
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

This is how it looks like when we use the date range picker:

You can find more examples of the date range picker on the official Angular Material website.

Datepicker Touch UI Mode (Recommended for Smartphones and Tablets)

A really cool feature included in the datepicker module from Angular Material is the Touch UI Mode. The Touch UI Mode opens up the calendar in a large modal instead of below the input-field.

The best part about Touch UI Mode is that it looks so good on handheld devices and you only need to add one directive, touchUi, to your datepicker element:

<mat-form-field>
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date" />
    <input matEndDate placeholder="End date" />
  </mat-date-range-input>
  <mat-hint>MM/DD/YYYY - MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker touchUi #picker></mat-date-range-picker>
</mat-form-field>

Here is how the date range picker we created earlier looks like when Touch UI Mode is enabled:

Datepicker Filters

The datepicker module included in Angular Material comes with the functionality of disabling parts of the datepicker and preventing users from choosing specific dates and/or date ranges.

Disabling Parts of Datepicker

All input elements inside the encapsulating <mat-form-field> can be disabled, just like any standard input element in HTML.

Here is an example where we disable the input field but keep the datepicker enabled:

<mat-form-field>
  <mat-label>Input disabled</mat-label>
  <input matInput [matDatepicker]="picker" disabled />
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker disabled="false"></mat-datepicker>
</mat-form-field>

Preventing Specific Dates and Date Ranges

In order to prevent specific dates and date ranges in a datepicker we only need to set two properties, min and max, on our element using the matInput directive:

<mat-form-field>
  <mat-label>Input disabled</mat-label>
  <input matInput [matDatepicker]="picker" [min]="minDate" [max]="maxDate" />
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker disabled="false"></mat-datepicker>
</mat-form-field>

And in our component we define the properties minDate and maxDate and instantiate them inside the constructor:

import { Component } from "@angular/core";

@Component({
  selector: "app-datepicker",
  templateUrl: "./datepicker.component.html",
  styleUrls: ["./datepicker.component.scss"],
})
export class DatepickerComponent {
  minDate: Date;
  maxDate: Date;
  constructor() {
    // Set the minimum to January 1st 3 years in the past and December 31st a year in the future.
    const currentYear = new Date().getFullYear();
    this.minDate = new Date(currentYear - 3, 0, 1);
    this.maxDate = new Date(currentYear + 1, 11, 31);
  }
}

Here’s how our date-filter looks like when we run our Angular application:

Conclusion

That’s it for this tutorial. We have in this tutorial covered how to add a datepicker using Angular Material and walked you through a couple of basic examples.

Check out the official Angular Material Datepicker guide if you are interested and want to know even more about datepickers, you can find it here.

Did you know that we have a lot more articles about Angular Material? Level up your web development skills by following our list of Angular Material tutorials, you can find them here!