mat-date-picker in Angular Material

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

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 { }

app.component.html:

HTML

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

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: