Skip to content
Related Articles

Related Articles

mat-date-picker in Angular Material
  • Last Updated : 30 Nov, 2020

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

Approach:

  • 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:

app.module.ts:



Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import { NgModule } from '@angular/core';
import { BrowserModule } from 
    '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from 
    '@angular/platform-browser/animations';
import { MatButtonModule } from 
    '@angular/material/button';
import { MatButtonToggleModule } from 
    '@angular/material/button-toggle';
import { MatDatepickerModule } from 
    '@angular/material/datepicker';
import { MatInputModule } from 
    '@angular/material/input';
import { MatFormFieldModule } from 
    '@angular/material/form-field';
import { MatNativeDateModule } from 
    '@angular/material/core';
  
@NgModule({
    imports: [BrowserModule,
        FormsModule,
        BrowserAnimationsModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatDatepickerModule,
        MatInputModule,
        MatFormFieldModule,
        MatNativeDateModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

chevron_right


app.component.html: 

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • 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:
     

My Personal Notes arrow_drop_up
Recommended Articles
Page :