Angular Material- Datepicker

The datepicker allows the users to enter a date by text input or choose a date from calendar. It consists of a text input and a calendar popup that is associated with the matDatepicker property on the text input.

There is an optional datepicker toggle button that gives the user an easy way to open the datepicker pop-up.

  <input matInput [matDatepicker] =”picker”>  <mat-datepicker-toggle matSuffix [for]=”picker”></mat-datepicker-toggle>  <mat-datepicker #picker></mat-datepicker>  

It is an input that is the part of <mat-form-field> and the toggle can be used as a prefix or suffix on the content input.

  <mat-form-field appearance=”fill”>    <mat-label>Choose a date</mat-label>    <input matInput [matDatepicker]=”picker”>    <mat-datepicker-toggle matSuffix [for]=”picker”></mat-datepicker-toggle>    <mat-datepicker #picker></mat-datepicker>  </mat-form-field>  

If we want to customize the icon inside the mat-datepicker-toggle, we can do so by using the matDatepickerToggleIcon directive.

app.component.html

  <mat-form-field class=”example-full-width” appearance=”fill”>    <mat-label>Choose a date</mat-label>    <input matInput [matDatepicker]=”picker”>    <mat-datepicker-toggle matSuffix [for]=”picker”>      <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>    </mat-datepicker-toggle>    <mat-datepicker #picker></mat-datepicker>  </mat-form-field>  

app.component.ts

  import {Component} from ‘@angular/core’;  /** @title Datepicker with custom icon */  @Component({    selector: ‘datepicker-custom-icon-example’,    templateUrl: ‘datepicker-custom-icon-example.html’,  })  export class DatepickerCustomIconExample {}  

Output:

Date Range Selection

If we want to select multiple types of dates, we can use the mat-date-range-input and mat-date-range-picker components. They operate in tandem, similarly to mat-datepicker and required date picker input.

  <mat-date-range-input>    <input matStartDate placeholder=”Start date”>    <input matEndDate placeholder=”End date”>  </mat-date-range-input>  

The mat-date-range-picker serves as a pop-up panel for selecting component dates. It works in the same way as matte-datepicker, but allows the user to select multiple times:

Connect the range picker using the rangePicker property:

  <mat-date-range-input [rangePicker]=”picker”>    <input matStartDate placeholder=”Start date”>    <input matEndDate placeholder=”End date”>  </mat-date-range-input>  <mat-date-range-picker #picker></mat-date-range-picker>  

Date Range Input Forms Integration

The matte-date-range-input component is used with form graph directive to sum the starting and end values from @angular/forms and validating it as a group.

app.component.html

  <mat-form-field appearance=”fill”>    <mat-label>Enter a date range</mat-label>    <mat-date-range-input [formGroup]=”range” [rangePicker]=”picker”>      <input matStartDate formControlName=”start” placeholder=”Start date”>      <input matEndDate formControlName=”end” placeholder=”End date”>    </mat-date-range-input>    <mat-datepicker-toggle matSuffix [for]=”picker”></mat-datepicker-toggle>    <mat-date-range-picker #picker></mat-date-range-picker>    <mat-error *ngIf=”range.controls.start.hasError(‘matStartDateInvalid’)”>Invalid start date</mat-error>    <mat-error *ngIf=”range.controls.end.hasError(‘matEndDateInvalid’)”>Invalid end date</mat-error>  </mat-form-field>  <p>Selected range: {{range.value | json}}</p>  

app.component.ts

  import {Component} from ‘@angular/core’;  import {FormGroup, FormControl} from ‘@angular/forms’;  /** @title Date range picker forms integration */  @Component({    selector: ‘date-range-picker-forms-example’,    templateUrl: ‘date-range-picker-forms-example.html’,  })  export class DateRangePickerFormsExample {    range = new FormGroup({      start: new FormControl(),      end: new FormControl()    });  }  

Output:

Changing the Datepicker Colors

The datepicker popup inherits the color palette (primary, accent, or warning) associated with the matte-form field. If we want to specify a different palette for the popup, we can set the color property on mat-datapic.

app.component.html

  <mat-form-field color=”accent” appearance=”fill”>    <mat-label>Inherited calendar color</mat-label>    <input matInput [matDatepicker]=”picker1″>    <mat-datepicker-toggle matSuffix [for]=”picker1″></mat-datepicker-toggle>    <mat-datepicker #picker1></mat-datepicker>  </mat-form-field>  <mat-form-field color=”accent” appearance=”fill”>    <mat-label>Custom calendar color</mat-label>    <input matInput [matDatepicker]=”picker2″>    <mat-datepicker-toggle matSuffix [for]=”picker2″></mat-datepicker-toggle>    <mat-datepicker #picker2 color=”primary”></mat-datepicker>  </mat-form-field>  

app.component.ts

  import {Component} from ‘@angular/core’;  /** @title Datepicker palette colors */  @Component({    selector: ‘datepicker-color-example’,    templateUrl: ‘datepicker-color-example.html’,    styleUrls: [‘datepicker-color-example.css’],  })  export class DatepickerColorExample {}  

app.component.css

Output:

Input and Change Events

The basic (input) and (change) events of the input will only trigger the user’s interaction with the input element; they are not fire when the user selects a date from the calendar popup.

app.component.html

  <mat-form-field appearance=”fill”>    <mat-label>Input & change events</mat-label>    <input matInput [matDatepicker]=”picker”           (dateInput)=”addEvent(‘input’, $event)” (dateChange)=”addEvent(‘change’, $event)”>    <mat-datepicker-toggle matSuffix [for]=”picker”></mat-datepicker-toggle>    <mat-datepicker #picker></mat-datepicker>  </mat-form-field>    <div class=”example-events”>    <div *ngFor=”let e of events”>{{e}}</div>  </div>  

app.component.ts

  import {Component} from ‘@angular/core’;  import {MatDatepickerInputEvent} from ‘@angular/material/datepicker’;    /** @title Datepicker input and change events */  @Component({    selector: ‘datepicker-events-example’,    templateUrl: ‘datepicker-events-example.html’,    styleUrls: [‘datepicker-events-example.css’],  })  export class DatepickerEventsExample {    events: string[] = [];      addEvent(type: string, event: MatDatepickerInputEvent) {      this.events.push(`${type}: ${event.value}`);    }  }  

app.component.css

  .example-events {    height: 200px;    border: 1px solid #555;    overflow: auto;  }  

Output:

Choosing a date implementation and date format settings

Datepicker was built to date implementation agnostic. It can be made to work with the implementation of different dates. However, developers need to provide appropriate pieces for Datepicker to work with their chosen performance. The easiest way to ensure it is to import one of the provided data modules:

MatNativeDateModule

Date type	Date
Supported locales	en-US
Dependencies	None
Import from	@angular/material/core

MatMomentDateModule

Date type	Moment
Import from	@angular/material-moment-adapter

Highlighting Specific Dates

If we want to apply one or more CSS classes to some calendar dates (e.g., to highlight a holiday. It accepts a function with each calendar date and will apply to any returned classes. The return value will be anything that is taken by ngClass.

app.component.html

  <mat-form-field class=”example-full-width” appearance=”fill”>    <mat-label>Choose a date</mat-label>    <input matInput [matDatepicker]=”picker”>    <mat-datepicker-toggle matSuffix [for]=”picker”></mat-datepicker-toggle>    <mat-datepicker [dateClass]=”dateClass” #picker></mat-datepicker>  </mat-form-field>  

app.component.ts

  import {Component, ViewEncapsulation} from ‘@angular/core’;  import {MatCalendarCellClassFunction} from ‘@angular/material/datepicker’;    /** @title Datepicker with custom date classes */  @Component({    selector: ‘datepicker-date-class-example’,    templateUrl: ‘datepicker-date-class-example.html’,    styleUrls: [‘datepicker-date-class-example.css’],    encapsulation: ViewEncapsulation.None,  })  export class DatepickerDateClassExample {    dateClass: MatCalendarCellClassFunction = (cellDate, view) => {      // Only highligh dates inside the month view.      if (view === ‘month’) {        const date = cellDate.getDate();          // Highlight the 1st and 20th day of each month.        return (date === 1 || date === 20) ? ‘example-custom-date-class’ : ”;      }        return ”;    }  }  

app.component.css

Output:

Keyboard Interaction

The date picker supports the following keyboard shortcuts:

Shortcut	Action
ALT + DOWN_ARROW	It opens the calendar popup
ESCAPE	It closes the calendar popup

In month view:

Shortcut	Action
LEFT_ARROW	Go to the previous day
RIGHT_ARROW	Go to next day
UP_ARROW	Go to the same day in the previous week
DOWN_ARROW	Go to the same day in the next week
HOME	Go to the first day of the month
END	Go to the last day of the month
PAGE_UP	Go to the same day in the previous month
ALT + PAGE_UP	Go to the same day in the previous year
PAGE_DOWN	Go to the same day in the next month
ALT + PAGE_DOWN	Go to the same day in the next year
ENTER	Select current Date

In year view:

Shortcut	Action
LEFT_ARROW	Go to the previous month
RIGHT_ARROW	Go to next month
UP_ARROW	Go up a row (back four months)
DOWN_ARROW	Go down a row (forward four months)
HOME	Go to the first month of the year
END	Go to the last month of the year
PAGE_UP	Go to the same month in the previous year
ALT + PAGE_UP	Go to the same month ten years back
PAGE_DOWN	Go to the same month in the next year
ALT + PAGE_DOWN	Go to the same month ten years forward
ENTER	Select current month

In multi-year view:

Shortcut	Action
LEFT_ARROW	Go to the previous year
RIGHT_ARROW	Go to next year
UP_ARROW	Go up a row (back four years)
DOWN_ARROW	Go down a row (forward four years)
HOME	Go to the first year in the current range
END	Go to the last year in the current range
PAGE_UP	Go back 24 years
ALT + PAGE_UP	Go back 240 years
PAGE_DOWN	Go forward 24 years
ALT + PAGE_DOWN	Go forward 240 years
ENTER	Select current year

Angular Content is a UI component library developed by the Angular team to build design components for desktop and mobile web applications. To install it, we need to install Angular in our project, and once you have it, you can enter the command below and download it.

Example 1:

app.module.ts:

  import { NgModule } from ‘@angular/core’;  import { BrowserModule } from       ‘@angular/platform-browser’;  import { FormsModule } from ‘@angular/forms’;  import { AppComponent } from ‘./app.component’;  import { BrowserAnimationsModule } from       ‘@angular/platform-browser/animations’;  import { MatButtonModule } from       ‘@angular/material/button’;  import { MatButtonToggleModule } from       ‘@angular/material/button-toggle’;  import { MatDatepickerModule } from       ‘@angular/material/datepicker’;  import { MatInputModule } from       ‘@angular/material/input’;  import { MatFormFieldModule } from       ‘@angular/material/form-field’;  import { MatNativeDateModule } from       ‘@angular/material/core’;  @NgModule({      imports: [BrowserModule,          FormsModule,          BrowserAnimationsModule    MatButtonModule,          MatButtonToggleModule,          MatDatepickerModule,          MatInputModule,          MatFormFieldModule,          MatNativeDateModule      ],      declarations: [AppComponent],      bootstrap: [AppComponent]  })  export class AppModule { }  

app.component.html

  <mat-form-field appearance=”fill”>      <mat-label>Choose a date</mat-label>      <input matInput [matDatepicker]=”picker1″>      <mat-datepicker-toggle matSuffix [for]=”picker1″>      </mat-datepicker-toggle>      <mat-datepicker #picker></mat-datepicker>  </mat-form-field>  <br>    <mat-form-field color=”accent” appearance=”fill”>      <mat-label>Choose a date</mat-label>      <input matInput [matDatepicker]=”picker2″>      <mat-datepicker-toggle matSuffix [for]=”picker2″>      </mat-datepicker-toggle>      <mat-datepicker #picker2></mat-datepicker>  </mat-form-field>  <br>  <mat-form-field appearance=”fill”>      <mat-label>Completely disabled</mat-label>      <input matInput [matDatepicker]=”picker3″ disabled>      <mat-datepicker-toggle matSuffix [for]=”picker3″>      </mat-datepicker-toggle>      <mat-datepicker #picker3></mat-datepicker>  </mat-form-field>  <br>  <mat-form-field appearance=”fill”>      <mat-label>Popup disabled</mat-label>      <input matInput [matDatepicker]=”picker4″>      <mat-datepicker-toggle matSuffix [for]=”picker4″           disabled>      </mat-datepicker-toggle>      <mat-datepicker #picker4></mat-datepicker>  </mat-form-field>  

Output:

It is the way by which a pop-up containing a calendar will be opened:

Example 1:

Modified module descriptor 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, MatInputModule,MatNativeDateModule} from ‘@angular/material’;  import {FormsModule, ReactiveFormsModule} from ‘@angular/forms’;  @NgModule({     declarations: [        AppComponent     ],     imports: [        BrowserModule,        BrowserAnimationsModule,        MatDatepickerModule, MatInputModule,MatNativeDateModule,        FormsModule,        ReactiveFormsModule     ],     providers: [],     bootstrap: [AppComponent]  })  export class AppModule { }  

Modified HTML host file app.component.html.

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

Output:

Explanation

In the previous example, we have created an input box and bind a date picker named picker by using [matDatepicker] attribute. After that, we have created a date picker named picker by using the mat-date picker tag.

Next TopicAngular Material Snackbar

angular angular 8 angular material angular material features angular material tutorial angularjs angularjs vs angular css html javascript what is angular material

Angular Material Datepicker

Angular Material- Datepicker

Date Range Selection

Date Range Input Forms Integration

Changing the Datepicker Colors

Input and Change Events

Choosing a date implementation and date format settings

Highlighting Specific Dates

Keyboard Interaction

In month view:

In year view:

In multi-year view:

Example 1:

Example 1:

Explanation

Angular Reactive Forms

Bootstrap Modal Popup in Angular 9/8

You may also like