Angular 11 Date Range Picker Tutorial Example

Angular 11 date range picker component example. In this tutorial, you will learn how to use angular material to integrate date range picker in angular 11.

In this tutorial will guide you on how to integrate angular material for show date range picker in angular 11 app.

Angular 11 Date Range Picker Example

• Step 1 – Create New Angular App
• Step 2 – Install Angular Material Design
• Step 3 – Import Angular Material Module
• Step 4 – Add Code on View File
• Step 5 – Add Code On Component ts File
• Step 6 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Angular Material Design

In this step, you need to install angular material design for date range picker. so open terminal and execute the following command on it:

ng add @angular/material

After that, you will look like on your terminal:

Installing packages for tooling via npm.

Installed packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     

   [ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up global Angular Material typography styles? Yes

? Set up browser animations for Angular Material? Yes

Step 3 – Import Angular Material Module

In this step, you need to import MatDatepickerModule, MatNativeDateModule, MatFormFieldModule and ReactiveFormsModule from angular/material. So visit src/app directory and open app.module.ts and then update the following code into it:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
       
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';
import { ReactiveFormsModule } from '@angular/forms';
  
@NgModule({
  declarations: [
    AppComponent
  ],
    imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    ReactiveFormsModule ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 – Add Code on View File

In this step, create simple reactive form to integrate date range picker in angular 11 app. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 11 Date Range Picker Example - Tutsmake.Com</h1>
   
<mat-form-field appearance="outline">
  <mat-label>Select Date Range</mat-label>
    
  <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
    <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-form-field>
  
<h3>Start: {{range.value.start | date}} End: {{range.value.end | date}}</h3>

Step 5 – Add Code On Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

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

Step 6 – Start Angular App

In this step, execute the following commands on terminal to start angular app:

ng serve

Recommended Angular Posts