Angular 15/14 Material Datepicker Tutorial

Angular 15/14 material datepicker; In this tutorial, i am going to show you how to create and use datepicker using the material library in Angular 15/14 apps.

Angular 15/14 Material Datepicker Tutorial

Use the below given steps to create and use datepicker using material in the Angular 15/14 apps:

Step 1 – Create New Angular App
Step 2 – Install Ng Material
Step 3 – Import Form Module
Step 4 – Create Material DatePicker HTML in View File
Step 5 – Start Angular App

Step 1 – Create New Angular App

Run the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Ng Material

Run the following command on terminal to install ng material into your Angular 15/14 apps:

ng add @angular/material

And will see on cmd; as follows:

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

And import the angular material theme, include the given below code to your src/index.html file.

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Visit to styles.css file and add the following code.

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

Step 3 – Import Module

Go to src/app/ directory and open app.module.ts file. Then import HttpClientModule, FormsModule and ReactiveFormsModule in this file, as follows:

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 – Create Material DatePicker HTML in View File

Go to src/app directory and open app.component.html file. Then update the following code into it to creating datepicker in angular apps; as follows:

<h1>Angular 15/14 Material Datepicker Example - Laratutorials.Com</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>

Note that:- In the above form, have used bootstrap 5 classes. if you want to add than then; you can see the following article for that; as follow:

Step 5 – Start Angular App

In this step, execute the following command on the terminal to start the angular app:

ng serve

Open browser, enter the below url:

http://localhost:4200

Conclusion

Angular 15/14 material datepicker; In this tutorial, You have learned how to create and use datepicker using the material library in Angular 15/14 apps.

Angular 15/14 Material Datepicker Tutorial