Angular Material Datepicker Example Tutorial

Angular Material Datepicker Example Tutorial. The Datepicker allows us to enter a date either through the text input or by choosing the date from a calendar. It is made up of various components and directives that work together. Angular Material is ground running with large, modern UI components that work across the webmobile, and desktopAngular Material components will help us in constructing attractive UI and UX, consistent, and functional web pages and web applications while keeping to modern web design principles like browser portability and compatibility, device independence, and graceful degradation.

Angular Material Datepicker Example Tutorial

Install Angular 6 using Angular CLI using the following command.

npm install -g @angular/cli

Now, generate the Angular project using the following command.

ng new materialdatepicker

 

Angular Material Datepicker Example Tutorial

Okay, now we need to install the other libraries.

Install Angular Material and Angular Animations using the following command.

npm install --save @angular/material @angular/animations @angular/cdk

Install the hammerjs using the following command.

npm install --save hammerjs

Hammer.js is the optional dependency and helps with touch support for a few of the components.

#1: Configure the dependencies.

Including a theme is required to apply all of the core and theme styles to your application.

Angular Material comes with some pre-built themes. These themes have set off the colors and basic styling. The main available themes are indigo-pinkdeeppurple-amberpurple-green and pink-bluegrey.

To get started with a pre-built theme, include one of Angular Material‘s prebuilt themes globally in your application. If you’re using the Angular CLI, you can add this to your styles.css.

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

You can also have access to the Material Design icons and use named icons with the <mat-icon> component. To import them to your project, you can add this to the head section of your project’s root index.html file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Materialdatepicker</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>

Some components (mat-slide-togglemat-slider, matTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.

Import the file on your app’s entry point (e.g., src/main.ts).

// main.ts

import 'hammerjs'

#2: Create a Custom Material Module File.

Inside src >> app folder, create one file called material.module.ts and add the following code.

// material.module.ts

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

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

export class MaterialModule {}

Now, import the material.module.ts file inside the app.module.ts file.

Also, finally write the 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>

Save the file and go to a terminal or cmd and start Angular Development Server.

ng serve --open

 

Angular Material Datepicker Example

So, finally, we can display the datepicker. Okay, now add the submit button and also add the form modules inside our app.

#3: Add the ReactiveFormsModule.

Add the following code inside the app.module.ts file.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from './material.module';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, add the form controls inside the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';
import { FormControl, FormGroup,  FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  angularForm = new FormGroup ({
    date: new FormControl()
  });
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
    this.angularForm = this.fb.group({
      date: '',
    });
  }
  addDate(date) {
    console.log(date);
  }
}

Finally, add the HTML code inside the app.component.html file.

<!-- app.component.html -->

<form [formGroup]="angularForm" novalidate>
  <mat-form-field>
    <input matInput [matDatepicker]="picker" 
      placeholder="Choose a date" 
      formControlName="date"
      #date>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <button mat-button
  (click)="addDate(date.value)">Submit</button>
</form>

Save the file and see the form and add the date and submit the form.

 

Angular Datepicker Example

Finally, Angular Material Datepicker Example Tutorial is over.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.