Datepicker in Angular 9

Angular provides datepicker as an inbuilt material component that allows us to select a date. You can either choose a date from the calendar or enter it as text input. It's made using different angular components and directives that work together. Angular Material is a component UI library for Angular development. This works with mobile, web and desktop. Angular Material Datepicker allows you to enter dates through text input or calendar. To use Datepicker we need to install Angular CLI. Use the below command to install CLI.

npm install -g @angular/cli
Then you need to install other libraries , go to your project and install hammerjs.


npm install --save hammerjs

Hammerjs helps in touch support. 

You can install an available theme by importing it in your global style.css file.

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

To use Material design icons in import them in your index.html file with the name <mat-icon> component.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Datepicker</title>

  <base href="/">


  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>

  <app-root></app-root>

</body>

</html>


Now you need to create a custom material module file.  In the src directory of your project inside the app folder create material.module.ts and add the following code.


// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material';

@NgModule({
  imports: [
    MatDatepickerModule
  ],
  exports: [
    MatDatepickerModule
  ]
})

export class MaterialModule {}

In the code we have imported MatDatepickerModule, MatNativeDateModule. It is easy to include Material components in this file and this file will be imported inside app.module.ts.

// material.module.ts

import { NgModule } from '@angular/core';
import { MatDatepickerModule,
        MatNativeDateModule,
        MatFormFieldModule,
        MatInputModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  exports: [
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule,
    MatInputModule,
    BrowserAnimationsModule
  ],
  providers: [ MatDatepickerModule ],
})

export class MaterialModule {}
As explained in the above paragraph we will import MaterialModule inside the app.module.ts file. 
// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialModule } from './material.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Write Datepicker HTML code inside the app.component.html file.

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


Go to your terminal window and start Angular development server using the below command.


ng serve --open


You will be able to see datepicker in your browser now. To connect it to the input add the following. Datepicker has text input and calendar popup connected using matDatepicker property on the text input.


<input [matDatepicker]="myDatepicker">

<mat-datepicker #myDatepicker></mat-datepicker>


To add the optional toggle button in your input add the code below.


<input [matDatepicker]="myDatepicker">

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

<mat-datepicker #myDatepicker></mat-datepicker>