Angular Material 16 Datepicker Example Tutorial

Create Specific Angular Material Module File

In this part of the tutorial, we’ll create a specific angular material module file.

As we know Angular material offers wide range of ui components so that we can import the angular material ui components in this file for easy manageability.

Go to angular-material.module.ts file and include the following code. This file will be imported in main App Module file.

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
const materialModules = [
  MatDatepickerModule,
  MatNativeDateModule,
  MatFormFieldModule,
  MatInputModule
];
@NgModule({
  imports: [
    CommonModule,
    ...materialModules
  ],
  exports: [
    ...materialModules
  ],
})
export class AngularMaterialModule { }

Now, go to app.module.ts file and import the AngularMaterialModule.

import { AngularMaterialModule } from './angular-material.module';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
  declarations: [],
  imports: [
    AngularMaterialModule,
  ],
  providers: [],
  bootstrap: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Adding Angular Material Datepicker

In next step we’ll add an input field which will show datepicker in frontend.

Understand Angular Datepicker input field

Angular material datepicker is a combination of text input and calendar popup.

<input [matDatepicker]="myDatepicker">
<mat-datepicker #myDatepicker></mat-datepicker>

To toggle on Angular calendar icon, we use datepicker toggle button as mentioned in the example below.

<input [matDatepicker]="myDatepicker">
<mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

The <mat-form-field> tag is a wrapper for input fields in an angular material form.

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Initialize Angular Material Calendar View

Initializing calendar view in Angular Material is not very difficult job.

We can use the startView property of <mat-datepicker> date field. The calendar view can be set to month, year, or multi-year.

Go to app.component.html file and add the following code.

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

Go to app.component.ts file and add the following code.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  startDate = new Date(2000, 0, 2);
}

Start Application

Finally, we’ve setup angular material ui library in angular app. Enter the below command in your terminal and hit enter to run the project.

ng serve --open

Finally, we’ve completed Angular Material Date-picker tutorial with examples.