Datepicker using Angular Material

In My last article i discussed on how use stepper in our application. In these article I discuss on How to use Datepicker in Angular material.
Datepicker allows to enter a date either through text input, or by selecting a date from the calendar. It is made up of several components and directives that work together.First we need to add “MatDatepickerModule” Module in our application.

.................
//we need to import first MatDatepickerModule From Material.
import {MatDatepickerModule} from '@angular/material/datepicker';
...................
@NgModule({
  .........
  imports: [
                MatDatepickerModule,
            ...
           ]
})
export class AppModule(){}

Connect a datepicker to an input
Datepicker is composed of a text input and a calendar pop-up, connected using the matDatepicker property on the text input.

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

We can also added toggle button in textbox using below code.

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

Full Datepicker code embedded code.

Calendar view
Default calendar view is month.We can set month, year, or multi-year.
The year, month , or range of years that the calendar opens to is determined by first checking if any date is currently selected, if so it will open to the month or year containing that date. Otherwise it will open to the month or year containing today’s date.


Datepicker uses 5 Directives

 
Basic Example for Datepicker

import {Component} from '@angular/core';

@Component({
  selector: 'datepicker-basic-example',
  templateUrl: 'datepicker-basic-example.html',
  styleUrls: ['datepicker-basic-example.css'],
})
export class DatepickerBasicExample {}

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