Angular Material Date Range Picker

In this article, we’ll see how can we setup Angular Material Date Range Picker in angular application.

Date Range picker is mostly used and high demanded component that we need most of the time while building an application.

Luckily we have builtin Angular Material Date Range Picker component in Angular Material library which is released with Angular 10 release.

If you’ve use cases where you want to take range of dates from the user, you can use mat-date-range-input and mat-date-range-picker component. If you’ve used angular mat-datepicker

Now we’ll see how to setup angular material date range picker component.

Table of Contents

Create Angular Workspace

Here we need to create Angular 10 project, because angular material date range component is released from Angular v10.

If you don’t have angular cli installed already then install using the following command.

Install Angular CLI

npm install -g @angular/cli

Or if you’ve an existing project, you’ll need to update to Angular 10. See this guide to update Angular 9 to Angular 10. Or if you don’t have existing project

Generate new project

Create angular project using angular cli command

ng new angular-material-daterange-sample

Navigate to project directory

cd angular-material-daterange-sample

Add Angular Material

ng add @angular/material

To learn more about how to install angular material checkout this article: How to install angular material in Angular Application

Now if you’ll run the project, you’ll get the following nice layout which introduced in angular 10

We need to import MatDatepickerModule to use angular material date range input

Now update app.module.ts with the following code.


import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatInputModule,
    MatFormFieldModule,
    MatNativeDateModule
  ],
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

and update app.component.html


<h1>
  Anguar Material Date Range Picker Example
</h1>
<mat-form-field appearance="fill">
  <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-datepicker-toggle matsuffix="" [for]="picker">
  </mat-datepicker-toggle>
  <mat-date-range-picker #picker=""></mat-date-range-picker>
</mat-form-field>

Output

Angular Material Date Range

This is the sample code for date range picker.


<mat-form-field appearance="fill">
  <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-datepicker-toggle matsuffix="" [for]="picker">
  </mat-datepicker-toggle>
  <mat-date-range-picker #picker=""></mat-date-range-picker>
</mat-form-field>

A daterangepicker is composed of range of dates and a calendar pop-up, connected via the rangepicker property on the text input. That way dateRangePicker can be connected to an input.

There is also an optional datepicker toggle button that gives the user an easy way to open the datepicker pop-up.

Material Date Range Input

The mat-date-range-input component contains two input elements for the start and end dates:


  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate="" placeholder="Start date">
    <input matEndDate="" placeholder="End date">
  </mat-date-range-input>

Material Date Range Picker

mat-date-range-picker is popup for selecting dates and allows to pick two date values(start and end date)


  <mat-date-range-picker #picker=""></mat-date-range-picker>

Connect Date Range Picker to Range Input

We can connect range picker(popup) and range input using rangePicker property. so that when we select dates from picker it’ll be updated in range input and vice versa.



 <mat-date-range-input [rangepicker]="picker">
  <input matstartdate="" placeholder="Start date">
  <input matenddate="" placeholder="End date">
</mat-date-range-input>

<mat-date-range-picker #picker=""></mat-date-range-picker>

Date Range Picker Examples

We’ll see different example of angular date range picker that might be useful in your project.

Date Range Picker with Reactive Forms

You can use date range picker input with FormGroup directive to group start and end date values and you can validate it.

In this example, We’ll see how can we use reactive form with date range input.

app.component.ts


import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  form: FormGroup;
  constructor(private fb: FormBuilder) {

  }
  ngOnInit() {
    this.form = this.fb.group({
      start: [],
      end: []
    })
  }
}

app.component.html



<mat-form-field appearance="fill" [formgroup]="form">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangepicker]="picker">
    <input matstartdate="" formcontrolname="start" placeholder="Start date">
    <input matenddate="" formcontrolname="end" placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matsuffix="" [for]="picker">
  </mat-datepicker-toggle>
  <mat-date-range-picker #picker=""></mat-date-range-picker>
</mat-form-field>

<p>Selected form values: {{form.value | json}}</p>

You’ll need to import ReactiveFormsModule in your module file.

Output

Date Range Picker Toggle as Prefix

Toggle can easily be used as a prefix or suffix on the Material input


<mat-form-field appearance="fill">
  <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-datepicker-toggle matprefix="" [for]="picker">
  </mat-datepicker-toggle>
  <mat-date-range-picker #picker=""></mat-date-range-picker>
</mat-form-field>

Output

Angular Material Date Range Picker Prefix toggle Example

Date Range Picker Custom Icon

If you want to customize the icon of mat-datepicker-toggle, you can change by using matDatepickerToggleIcon directive.

You’ll need to include MatIconModule in you module file.


<mat-form-field appearance="fill">
  <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-datepicker-toggle matsuffix="" [for]="picker">
    <mat-icon matdatepickertoggleicon="">keyboard_arrow_down</mat-icon>
  </mat-datepicker-toggle>
  <mat-date-range-picker #picker=""></mat-date-range-picker>
</mat-form-field>

Output

Angular Material Date Range Picker Custom Toggle Icon Example

Set Calendar Starting View

The startView property of mat-date-range-picker can be used to set the view that will show up when the calendar first opens. It can be set to month, year, or multi-year; by default it will open to month view.

The month, year, or range of years that the calendar opens to is determined by first checking if any date is currently selected, if so it will open to the month or year containing that date. Otherwise it will open to the month or year containing today’s date. This behavior can be overridden by using the startAt property of mat-date-range-picker. In this case the calendar will open to the month or year containing the startAt date.


<mat-form-field appearance="fill" [formgroup]="form">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangepicker]="picker">
    <input matstartdate="" formcontrolname="start" placeholder="Start date">
    <input matenddate="" formcontrolname="end" placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matsuffix="" [for]="picker">
  </mat-datepicker-toggle>
  <mat-date-range-picker startview="year" #picker=""></mat-date-range-picker>
</mat-form-field>

Output

Disable Angular Date Range

You can disable angular material date range input using disabled property.

Enter a date range

Output

That’s it. I hope you like this article