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
