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 →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

^{Like/Subscribe us for latest updates or newsletter}

Blog