• MatDatepickerModule
• MatNativeDateModule
• MatFormFieldModule
• MatInputModule

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
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';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

STEP 4 - Add the datepicker in the view

Now we are almost done , in this last step we are going to add the datepicker code in the html view , in this example i have used app.component.html but you can use any component html file.

 src/app/app.component.html

<form action="" style="margin: auto; width: 50%;">
    <h2>Code Learning Point Datepicker Example</h2>

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

</form>

 Now you are ready just run the local server , run the below command to start the server

ng serve

Open this URL http://localhost:4200/

I hope this article is helpful for you , i am very glad to help you thanks for reading