Angular Material Datepicker Style

By Arvind Rai, May 17, 2024
We can customize the Angular Material datepicker style using dateClass, panelClass and color properties of <mat-datepicker> component.
dateClass and panelClass properties can attach the CSS classes to datepicker.
color property attaches the color palette (primary, accent, or warn) to datepicker.

dateClass

dateClass adds custom CSS classes to dates. dateClass is the property of <mat-datepicker>.
@Input()
dateClass: MatCalendarCellClassFunction<D> 
MatCalendarCellClassFunction : Generates extra CSS classes to be associated with calendar cell.
myDateClass: MatCalendarCellClassFunction<Date> =
   (date: D, view: 'month' | 'year' | 'multi-year') => MatCalendarCellCssClasses; 
MatCalendarCellCssClasses is a type alias for extra CSS classes.
Find the code snippet.
CSS class:
button.journey-date {
  background: aqua;
  border-radius: 50%;
} 
TS code:
myDateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
   ------
   const cssClassName = 'journey-date';
   return cssClassName;
}; 
HTML code:
<mat-form-field color="accent">
  ------
  <mat-datepicker #picker [dateClass]="myDateClass"></mat-datepicker>
</mat-form-field> 

Example:
styles.css
button.date-class1 {
  background: rgb(210, 190, 237);
  border-radius: 50%;
}
button.date-class2 {
  background: rgb(45, 207, 188);
  border-radius: 50%;
} 
item.component.ts
import { Component } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatCalendarCellClassFunction, MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-item',
  standalone: true,
  imports: [MatFormFieldModule, MatDatepickerModule, MatNativeDateModule, MatInputModule, ReactiveFormsModule],
  templateUrl: 'item.component.html'
})
export class ItemComponent {
  dateOfJourney = new FormControl();
  myDateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
    if (view === 'month') {
      const date = cellDate.getDate();
      const cssClassName = date % 2 === 0 ? 'date-class1' : 'date-class2';
      return cssClassName;
    }
    return '';
  };
} 
item.component.html
<mat-form-field>
  <mat-label>Select Date</mat-label>
  <input matInput [formControl]="dateOfJourney" [matDatepicker]="picker">
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker [dateClass]="myDateClass" #picker></mat-datepicker>
</mat-form-field> 
Angular Material Datepicker Style

panelClass

panelClass passes the CSS classes to the datepicker panel. panelClass is the property of <mat-datepicker>.
@Input()
panelClass: string | string[] 
Find the code.
CSS class
.my-date-picker {
  background: aqua;
  height: 400px;
} 
HTML
<mat-form-field color="accent">
  ------
  <mat-datepicker #picker panelClass="my-date-picker"></mat-datepicker>
</mat-form-field> 

Example:
styles.css
.my-date-picker {
  background: rgb(224, 120, 134);
  height: 400px;
  width: 300px;
  margin: 10px;
} 
item.component.html
<mat-form-field>
  <mat-label>Select Date</mat-label>
  <input matInput [formControl]="dateOfJourney" [matDatepicker]="picker">
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker panelClass="my-date-picker" #picker></mat-datepicker>
</mat-form-field> 
Angular Material Datepicker Style

color

color property passes color palette to datepicker calendar.
@Input()
color: ThemePalette 
Find the code.
1. Using color with mat-form-field :
In this case, datepicker will automatically inherit color palette from mat-form-field.
<mat-form-field color="primary">
  ------
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field> 
In the above code snippet, the active color palette for mat-datepicker is primary.
2. Using color with mat-datepicker : Use color with mat-datepicker only when we want to specify a different palette from parent mat-form-field for our datepicker popup.
<mat-form-field color="primary">
  ------
  <mat-datepicker #picker color="accent"></mat-datepicker>
</mat-form-field> 
In the above code snippet, the active color palette for mat-datepicker is accent.
Example:
item.component.html
<mat-form-field color="primary">
  <mat-label>Select Date</mat-label>
  <input matInput [formControl]="dateOfJourney" [matDatepicker]="picker">
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker color="accent" #picker></mat-datepicker>
</mat-form-field> 
Angular Material Datepicker Style

Reference

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE












©2024 concretepage.com | Privacy Policy | Contact Us