Angular 11 Date Range Picker Tutorial Example - Yudhy Network

Share on:

Yudhy Network - 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.

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
Recommended:- Angular 11 Reactive Forms Validation Tutorial Example

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
Recommended:- Angular 11 Image Upload With Preview Tutorial

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 { }
Recommended:- Angular 11 DataTable Tutorial Example

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()
  });
}
Recommended:- Angular 11 CRUD Application Tutorial Example

Step 6 – Start Angular App

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

ng serve

Recommended Angular Posts

Recommended:- Angular 11 Radio Button Reactive Form Example
Recommended:- Angular 11 Select Dropdown Example Tutorial
Recommended:- Angular 11 Stripe Payment Checkout Gateway Example
Recommended:- Angular 11 Multiple File Upload Tutorial Example
Recommended:- Angular 11 Google Maps Integration Tutorial Example
Recommended:- Angular 11 Sweetalert2 Tutorial Example
Recommended:- Angular 11 Full Page Scrolling Example
Recommended:- Angular 11 Checkbox Checked Event Tutorial

Please ask in the comments!

Suport : Cotekno.Com

comments powered by Disqus