Open In App
Related Articles

mat-date-picker in Angular Material

Improve Article
Save Article
Like Article

Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can download it.

Installation syntax:

ng add @angular/material


  • First, install the angular material using the above-mentioned command.
  • After completing the installation, Import ‘  MatDatepickerModule,’ from ‘@angular/material’ in the app.module.ts file.
  • Then use <mat-datepicker-toggle> tag to use angular material date picker and as well as matInput.
  • We can also disable the popup of the date picker and enter the date manually. There are different themes available for different colors.
  • In order to change the theme, we need to pass a color property. Below I had used an accent theme and default theme to give a broader view.
  • Once done with the above steps then serve or start the project.

Code Implementation:



import { NgModule } from '@angular/core';
import { BrowserModule } from 
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from 
import { MatButtonModule } from 
import { MatButtonToggleModule } from 
import { MatDatepickerModule } from 
import { MatInputModule } from 
import { MatFormFieldModule } from 
import { MatNativeDateModule } from 
    imports: [BrowserModule,
    declarations: [AppComponent],
    bootstrap: [AppComponent]
export class AppModule { }



<mat-form-field appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker1">
    <mat-datepicker-toggle matSuffix [for]="picker1">
    <mat-datepicker #picker></mat-datepicker>
<mat-form-field color="accent" appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker2">
    <mat-datepicker-toggle matSuffix [for]="picker2">
    <mat-datepicker #picker2></mat-datepicker>
<mat-form-field appearance="fill">
    <mat-label>Completely disabled</mat-label>
    <input matInput [matDatepicker]="picker3" disabled>
    <mat-datepicker-toggle matSuffix [for]="picker3">
    <mat-datepicker #picker3></mat-datepicker>
<mat-form-field appearance="fill">
    <mat-label>Popup disabled</mat-label>
    <input matInput [matDatepicker]="picker4">
    <mat-datepicker-toggle matSuffix [for]="picker4" 
    <mat-datepicker #picker4></mat-datepicker>


  • GIF :

  • Output Images: This is the way how a pop-up containing a calendar will be opened:

  • After selecting the calendar this is the way how date appears:

  • If the theme used is accent theme:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 30 Nov, 2020
Like Article
Save Article
Similar Reads
Complete Tutorials