Tech: Angular Component Alert - Date Range Picker

The most requested component is now available in Angular 10

With the new release of Angular 10 coming out recently, Material team announced there is a new type of component joining the group of Datepicker module called Date Range Picker (DRP). It allows users to pick consecutive set of dates in one calendar picker. Yes you heard that right: in one single calendar picker. Back in the day, developers often created 2 separate datepicker components to hold the values of startDate and endDate. Hence, the release of the new component will definitely help reduce boilerplate in your form in the case where you need to support date range type of input going forward.

In this article, we will learn how to setup an Angular 10 app with the integration of DRP component.

1. Setup

First, install Angular CLI 10 with following command:

npm install -g @angular/cli@10

If you already had Angular CLI installed but in previous version, you can run these commands to update the CLI to version 10.

npm uninstall -g angular/cli           // uninstall prev version
npm install -g @angular/cli@10         // install cli 10

Now we need to create a new Angular app using the CLI. Then change the current directory to the location of the app.

ng new date-range-picker
cd date-range-picker

2. Add Date Ranger Picker

After the new app has been generated, you can start adding Material library into the app by running the following command:

ng add @angular/material@10

Then import several supporting modules into app module.

import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatInputModule} from '@angular/material/input';
import {MatNativeDateModule} from '@angular/material/core';
@NgModule({
  ...
imports: [
    ...
    MatDatepickerModule,
    MatNativeDateModule
    MatInputModule
  ],
  
  ...
})
export class AppModule { }

Note that you can replace MatNativeDateModule with MatMomentDateModule, or your own custom implementation. See Material docs for more details.

After adding required modules, we can start building the actual DRP with the following code:

<mat-form-field appearance="fill">
  
  <!-- Label -->
  <mat-label>Enter a date range</mat-label>
  <!-- Range Inputs -->
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <!-- Toggle to open calendar picker -->
  <mat-datepicker-toggle 
    matSuffix [for]="picker">
  </mat-datepicker-toggle>
  <!-- Date range picker -->
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

The component is wrapped inside mat-form-field and has 4 distinct parts:

• Label: description of the form field
• Range Inputs: container holding two values of fromDate and toDate
• Calendar picker toggle
• Date range picker.

3. Form Integration

Angular Material makes DRP component very easy to integrate with reactive form.

<mat-form-field appearance="fill">
  
  <!-- Label -->
  <mat-label>Enter a date range</mat-label>
  <!-- Range Inputs -->
  <mat-date-range-input 
    [formGroup]="formGroup" 
    [rangePicker]="picker">
    
    <input 
      matStartDate 
      formControlName="startDate" 
      placeholder="Start date">
    
    <input 
      matEndDate
      formControlName="endDate" 
      placeholder="End date">
  </mat-date-range-input>
  <!-- Toggle to open calendar picker -->
  <mat-datepicker-toggle 
    matSuffix [for]="picker">
  </mat-datepicker-toggle>
  <!-- Date range picker -->
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

It also has built-in validation to check whether users has picked a valid range or not e.g. startDate can’t be greater than endDate. The error for invalid dates can be obtained from reactive form with the code below:

formGroup.controls.startDate.hasError('matStartDateInvalid');
formGroup.controls.endDate.hasError('matEndDateInvalid');

4. Final Thought

I hope the release of Date Range Picker from Angular Material will be a great addition to the existing set of components like Tabs and Data Table… Thank you for the great community support and keep up the good work!!!

5. Did you see my other posts?

Tech: Building Dynamic Form in Angular 9 and Ivy — Part 1

Tech: Create a reactive Master-Detail template with Angular Router + Material