Angular 11|10 Date Range Picker Example

Hi All,

If you need to see example of angular 11|10 date range picker. This post will give you simple example of angular 11 material date range picker. I’m going to show you about angular 10 mat-date-range-input example. step by step explain date range picker angular 11|10.

In this example we will simply install angular Material design and we will use MatDatepickerModule, MatNativeDateModule, MatFormFieldModule and ReactiveFormsModule import class. using those class we will simple create angular material date range picker with input.

you can see preview as bellow:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

ng add @angular/material

Cmd like bellow:

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

Now, here we will import MatDatepickerModule, MatNativeDateModule, MatFormFieldModule and ReactiveFormsModule from angular/material and then we add on declarations part. so let's update app.module.ts file as like bellow:

src/app/app.module.ts

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: Update ts file

In this file we have to update component ts file as like bellow:

src/app/app.component.ts

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 5: Update html file

In this file we have to update component html file as like bellow:

src/app/app.component.html

<h1>Angular Date Range Picker Example - ItSolutionStuff.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>

Now you can run by bellow command:

ng serve

I hope it can help you...