MAT Date-picker

What is a Date-picker in angular material?

The date-picker is a component of the angular material that allows the user to enter a date, either through the text or by selecting a date from the calendar pop-up window. It is composed of several components, instructions and date implementation modules that work together.

API reference for Angular Material date-picker

Connecting a date-picker to an input

The date-picker is made up of text input and a calendar pop-up, which is linked via the mat-Date-picker property to the text input. It also has an optional date-picker toggle button that gives the user a simple method to open the date-picker pop-up window. It works exactly the same with input as <mat-form-field>.

Example 1: Basic date-picker

import {Component} from '@angular/core';
@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.html',
})
export class DatepickerOverviewExample {}

<mat-form-field appearance = "fill">
  <mat-label> Date Select </mat-label>
  <input matInput [matDatepicker] = "picker">
  <mat-datepicker-toggle matSuffix [for] = "picker"> </mat-datepicker-toggle>
  <mat-datepicker #picker> </mat-datepicker>
</mat-form-field>

Date range selection

If a user chooses two dates, rather than a single date, that will use the mat-date-range-input and mat-date-range-picker modules.

The <mat-date-range-input> and <mat-date-range-picker> modules require two input elements for start and end dates, respectively.

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

The <mat-date-range-picker> module serves as a pop-up panel for selecting dates. It works in the same way as mat-date-picker, but in this, the user has to select the date twice.

Connect the <mat-date-range-picker> and <mat-date-range-input> modules with the help of 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>

Example 2: Basic date range picker

import {Component} from '@angular/core';
@Component({
  selector: 'date-range-picker-overview-example',
  templateUrl: 'date-range-picker-overview-example.html',
})
export class DateRangePickerOverviewExample {}

<mat-form-field appearance = "fill">
  <mat-label> enter the start date and end date </mat-label>
  <mat-date-range-input [rangePicker] = "picker">
    <input matStartDate placeholder = "Start date">
    <input matEndDate 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-form-field>

Date range input forms integration

The <mat-date-range-input> module can be used with the FormGroup directive to concatenate the starting and end values from @angular/forms and validate them as a group.

Example 3: Date range picker forms integration

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

@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()
  });
}

<mat-form-field appearance = "fill">
  <mat-label> Enter the Start date and End date </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>

Changing the date-picker colors

The date-Picker pop-up window automatically inherits the color palette (warning, pronunciation, or primary) from the mat-form-field. If you want to change the color palette for the pop-up window, you can do this by setting the color property on the <mat-datepicker>.

Example 4: Date-picker palette colors

import {Component} from '@angular/core';

@Component({
  selector: 'datepicker-color-example',
  templateUrl: 'datepicker-color-example.html',
  styleUrls: ['datepicker-color-example.css'],
})
export class DatepickerColorExample {}

<mat-form-field color = "accent" appearance = "fill">
  <mat-label> Accent color calendar </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 = "warn" appearance = "fill">
  <mat-label> Warn color calendar </mat-label>
  <input matInput [matDatepicker] = "picker2">
  <mat-datepicker-toggle matSuffix [for] = "picker2"> </mat-datepicker-toggle>
  <mat-datepicker #picker2 color = "warn"> </mat-datepicker>
</mat-form-field>

<mat-form-field color = "primary" appearance = "fill">
  <mat-label> Primary color calendar </mat-label>
  <input matInput [matDatepicker] = "picker3">
  <mat-datepicker-toggle matSuffix [for] = "picker3"> </mat-datepicker-toggle>
  <mat-datepicker #picker2> </mat-datepicker>
</mat-form-field>

Highlighting specific dates

If a user wants to highlight certain dates in a calendar (such as highlighting a holiday), this may be possible with dateClass input.

Example 5: Date-picker with custom date classes

TS Code:

import {Component, ViewEncapsulation} from '@angular/core';
import {MatCalendarCellClassFunction} from '@angular/material/datepicker';

@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<Date> = (cellDate, view) => {
    // Only highlight dates inside the month view.
    if (view === 'month') {
      const date = cellDate.getDate();

      // Highlight the 1st and 20th day of each month.
      return (date === 2 || date === 22) ? 'example-custom-date-class' : '';
    }

    return '';
  }
}

HTML Code:

<mat-form-field class = "example-full-width" appearance = "fill">
  <mat-label> Enter 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>

CSS Code:

.example-custom-date-class {
  background: rgb(255, 0, 0);
  border-radius: 100%;
}

Next TopicPHP cURL

← prev next →

Latest Courses

We provides tutorials and interview questions of all technology like java tutorial, android, java frameworks

Contact info

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

[email protected].

Python

AI, ML and Data Science

Java

B.Tech and MCA

Web Technology

Software Testing

Technical Interview

Java Interview

Web Interview

Database Interview

Company Interviews

Blog

MAT Date-picker

What is a Date-picker in angular material?

Latest Courses

Contact info

Follow us

Tutorials

Interview Questions

Online Compiler