Angular Material Datepicker - Initial date styling-CodePudding

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:

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.

CodePudding user response：

Maybe this can help you

<td role="gridcell"  tabindex="0" data-mat-row="2" data-mat-col="5" aria-label="January 14, 2022" aria-selected="true" aria-current="date" style="width: 14.2857%; padding-top: 7.14286%; padding-bottom: 7.14286%;">
<div > 14 </div>
<div aria-hidden="true" ></div>
</td>

and this is the class that you want to update

.mat-calendar-body-selected {
    background-color: red;
}

So you might combine this .mat-calendar-body-selected with .mat-calendar-body-today

CodePudding user response：

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