Angular Material Date Range Picker

Introduction 

 

Date Range Picker allows users to select a range of start dates and end dates from the calendar popup.

 

Date Range Picker has various uses. For example, it can be used for:

• Creating sessions for multiple days
• Selecting tour dates 
• Selecting leave dates from the calendar while applying for leave
• And so on... 

Recently, Angular 10 was released. In this release, Angular Material 10 came up with new date range picker control, which is easy to use and very helpful to implement above functionalities.

 

In this article, we will see how to use the Angular Material date range picker, it's integration with forms, and usage of its important properties.

 

So let's start with the implementation. 

 

Create an Angular 10 Application and Add Angular Material

We will create a new Angular 10 application. If you want to add it to your existing application, then skip this step.

 

Note

Date Range Picker control was added in Angular 10, so if you have an older version of Angular, then you have to upgrade it to Angular 10.

ng new angular-date-range-picker-demo

Once the application is created, install the Angular Material library using the following add schematic.  

ng add @angular/material

Once it is done, we are ready to use the date range picker.

 

Import MatDatePickerModule and MatNativeDateModule

To use date picker in our application, we need to import MatDatePickerModule and MatNativeDateModule.

 

Note

We can create a separate shared module called MaterialSharedModule for material component modules and export all material component modules from there. So that we need to import only MaterialSharedModule in all application modules.

 

For this simple demo application, we will import both material component modules in AppModule. Other then these modules, we will also add the MatFormFieldModule.

So our AppModule will look like as shown below:

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

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 { MatFormFieldModule } from '@angular/material/form-field'
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule
    MatFormFieldModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use Date Range Picker in Component 

Angular material added mat-date-range-input and mat-date-range-picker components. They work similarly to the mat-datepicker and the basic date picker input.

 

As shown below:

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

• mat-date-range-input component requires the two input boxes, which will allow us to manually enter the start date and end date in input boxes, and with these controls we will map the FormControl.
• mat-date-range-picker component is the calender popup panel which will allow us to select the date range.
• We will associate mat-date-range-picker component with mat-date-range-input component using [rangePicker] property of mat-date-range-input.
• The mat-datepicker-toggle component will be visible as a calendar icon in the form field, this will toggle the mat-date-range-picker popup.
  
  So our date range picker will be as shown below:

 

Date Range Picker Form Integration

Angular Material Date Range Picker gives support for Angular form integration using reactive forms and template-driven forms.

 

We can also provide validation like min, max, and required.

 

In the following example, we will use the date range picker with reactive forms. In this example, we will also add the required validation.

/*** app.component.ts */

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  rangeFormGroup = new FormGroup({
    start: new FormControl(null, Validators.required),
    end: new FormControl(null, Validators.required)
  })

}

<!-- app.component.html -->

<div class="container">
  <h1>Angular Material Date Range Picker Demo</h1>
  <form [formGroup]="rangeFormGroup">
    <div>
      <mat-form-field appearance="fill">
        <mat-label>Enter a date range</mat-label>
        <mat-date-range-input [rangePicker]="picker">
          <input matStartDate placeholder="Start date" formControlName="start">
          <input matEndDate placeholder="End date" formControlName="end">
        </mat-date-range-input>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-date-range-picker #picker></mat-date-range-picker>
        <mat-error>Date Range is mandatory</mat-error>
      </mat-form-field>
    </div>
  </form>
  <div class="json">
    <h2>Integrated Form JSON</h2>
    <code><pre>{{rangeFormGroup.value | json}}</pre></code>
  </div>
</div>

 

Important Properties of mat-date-range-input

• separator: Separator text to be shown between the inputs, for example, you might want date range text like, [start date] to [end date], the default separator is - (hyphen).
  
  
• min: set the minimum allowed date in date range picker. The input type of this property is the Date.
   
• max: set the maximum allowed date in date range picker. The input type of this property is the Date.
  
  
• required: This property shows the small star icon in the date range picker placeholder.
  
  
• dateFilter: This property allows us to assign a custom date filter function. for example, if I want to allow date selection only from Monday to Friday then I can write date filter function as below and assign it to dateFilter property
  

  dateFilterFn = (date: Date)=> ![0,6].includes(date.getDay());

• disabled: Using this property we can disable the date range picker.

Let's see the usage of the above properties with the below example.

 

In the app.component.ts, we will add one date object and add the date filter function as shown below:

today = new Date(); // This date will be used for the min date
dateFilterFn = (date: Date)=> ![0,6].includes(date.getDay());

 In app.component.html, replace previous code's mat-date-range-input selector with the following code.

<mat-date-range-input [rangePicker]="picker" separator="to" required [min]="today" [dateFilter]="dateFilterFn">
  <input matStartDate placeholder="Start date" formControlName="start">
  <input matEndDate placeholder="End date" formControlName="end">
</mat-date-range-input>

 With the above properties, our output will look like as shown below:

 

 

 

Great ! We are done with angular material date range picker implementation. 

 

Check out the Source Code:

 

Angular Material Date Range Picker Demo Repository

 

Summary

In this article, we have seen:

1. How to use the Angular Material date range picker
2. Date range picker integration with Reactive Forms.
3. Usage of important properties of date range picker.

I hope you like this article, provide your valuable feedback and suggestions in the comments section below.

 

Give a like and share it with others so that it can reach more and more people.