Hello Devs,

In this tutorial, we are going to learn how to use datepicker in angular 10 material.

Datepicker is a primary requirement of project. we almost require to use datepicker in angular 10 app.

Follow this step by step guide given below:




Create New App

ng new myDatepicker



Add Material Design

ng add @angular/material

Installing packages for tooling via npm.

Installed packages for tooling via npm.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     

   [ Preview: https://material.angular.io?theme=indigo-pink ]

? Set up HammerJS for gesture recognition? Yes

? Set up browser animations for Angular Material? Yes



Import Module

src/app/app.module.ts

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

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

  

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatDatepickerModule} from '@angular/material/datepicker';

import {MatInputModule} from '@angular/material/input';

import {MatNativeDateModule} from '@angular/material/core';

  

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    MatDatepickerModule,

    MatInputModule,

    MatNativeDateModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }



Use Datepicker

src/app/app.component.html

<h1>Angular 10 Datepicker Example - - Rathorji.in</h1>

  

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

Run this command:

ng serve


I hope this example helps you.