Angular 14 Material Datepicker Example

Angular 14 material datepicker; In this tutorial, we will learn how to create and use datepicker using the material library in angular 14 apps.

Angular 14 Material Datepicker Example

Use the following steps to create and use datepicker using material in the angular 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

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Ng Material

Open your terminal and navigate to your angular 14 apps directory on terminal. Then execute the following command on it to install ng material into your angular 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 "~@angular/material/prebuilt-themes/indigo-pink.css";

Step 3 – Import Module

Visit 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

Create datepicker using Bootstrap 5 and ng bootstrap. So, visit 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 14 Material Datepicker Example - Tutsmake.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 14 material datepicker; In this tutorial, we have learned how to create and use datepicker using the material library in angular 14 apps.

Angular 14 Material Datepicker Example