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';
  imports: [
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

Directives Uses
MatCalendarHeader Selector: mat-calendar-header
Exported as: matCalendarHeader
MatDatepicker Selector: mat-datepicker
Exported as: matDatepicker
MatDatepickerInput Selector: input[matDatepicker]
Exported as: matDatepickerInput
MatDatepickerToggleIcon Selector: mat-datepicker-toggle
Exported as: matDatepickerToggle
MatDatepickerToggle Selector: mat-datepicker-toggle
Exported as: matDatepickerToggle

Basic Example for Datepicker

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

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

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

Spread the love
  • 24