Search code examples
cssangularangular-materialdatepicker

Angular Material Datepicker - Initial date styling

I want to change the styles of the today-date cell when the datepicker is opened and focused for the first time.

Right now, when I open the datepicker, the today-date cell has the following style:

enter image description here

As you can see, the 14th day cell has the default material background color applied.

I want to change this specific property. However, when I try to inspect this element, the class is not found since the datepicker focus is lost (the background-color disappears, leaving only the border on the cell).

I have tried playing around with .mat-calendar-body-today:focus or .mat-calendar-body-hover but neither of them seem to access the today-date when it is initially focused.

Thanks in advance.

Solution

  • Following up from alin's answer, the table cell class .mat-calendar-body-active grabbed my attention.

    Indeed, this is the class that should be used in combination with .mat-calendar-body-today, as opposed to .mat-calendar-body-selected.

    I managed to access the today-date cell when datepicker is first focused like so:

    /* SCCS alternative */
.mat-calendar-body-active {
    .mat-calendar-body-today {
        color: red;
        background-color: blue;
    }
}

/* CSS alternative */
.mat-calendar-body-active > .mat-calendar-body-today {
    color: red;
    background-color: blue;
}