How to Implement Date Range Picker in Angular 13

In this Angular 13 date range picker tutorial, you will find out the simple way to implement date range picker in the angular app using the angular material library.

The date range is a component which allows you to choose dates between two range from the calendar widget. Sometimes, you have to set a specific event that falls between two particular dates.

This quick and comprehensive tutorial helps you understand how to integrate the date range using an angular material package in an angular application from scratch.

Angular Material is an open-source modern UI library which comes with tons of UI component for building a web layout swiftly, and It is constructed primarily for Angular developers.

You can create eye-catching and user-centric UI components that look great and enhance the user experience by maintaining attractiveness and consistency. All the UI components developed in angular Material support modern browsers too.

Angular Date Range Picker with Angular Material Example

• Install New Angular Project
• Setting Up Angular Material in Angular
• Preparing Angular View
• Making Up Typescript Template
• Run Angular Development Server

Install New Angular Project

Before showing you the date range example, you need to set up angular CLI on your development server, then head over to the console and execute the command to install a new angular app:

ng new angular-date-range

Move inside the project root:

cd angular-date-range

Setting Up Angular Material in Angular

Once you got inside the project, now you have to install the material library in angular app. So, without further ado invoke the following command from the terminal window:

ng add @angular/material

Then certain questions will be manifested on your terminal screen. Choose the prebuilt theme, Angular Material typography and browser animations options:

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

In a subsequent step, you have to register angular material APIs such as (MatDatepickerModule, MatNativeDateModule,

MatFormFieldModule, ReactiveFormsModule) in angular’s app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatNativeDateModule } from '@angular/material/core';
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Configure Typescript Template

First, open the app.component.ts file; at the top, import the FormControl and FormGroup module from ‘@angular/forms’. Also, define a dateRange form with start and end value in addition to FormControl API.

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  dateRange = new FormGroup({
    start: new FormControl(),
    end: new FormControl()
  });
}

Preparing Angular Date Range View

Declare the mat-form-field directive to invoke the form, and the mat-date-range-input directive brings the date range picker in the view, not just that mention start and end date input along with the mat-datepicker-toggle directive.

Open and update app.component.html file:

<h2>Angular Date Range Picker Demo</h2>
<mat-form-field appearance="legacy">
  <mat-label>Choose Date Range</mat-label>
  <mat-date-range-input [rangePicker]="picker" [formGroup]="dateRange">
    <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>
<h2>
  Start: {{dateRange.value.start | date}}
  End: {{dateRange.value.end | date}}
</h2>

Run Angular Development Server

Ultimately, every thing has been done which is required to implement date range picker in angular. Its time to start the development server to see date range picker in action.

ng serve --open

Once the above command executed, it will open the date range demo app on the following URL:

http://localhost:4200

That’s all for now, i believe this step by step tutorial will help you in your angular development endeavours.