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

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

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.
Output

That’s it. I hope you like this article
Also Read:
- What’s new in Angular 10
- How to install angular material in Angular Application
- How to use Angular APP_INITIALIZER token
- How to use environment variable in Angular application
- Integrate CKEditor(rich text editor) in Angular
- How to check Angular CLI version and how to update it.
- Different ways to install bootstrap 4 in angular application
- How to define global constants(variables) in angular