CODEWITHSUNDEEP
cssangularangular-materialdatepicker
Manuel Brás
Manuel Brás

Reputation: 513

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.

Upvotes: 4

Views: 12110

Answers (3)

Ivan
Ivan

Reputation: 31

it works for me

.mat-calendar-body-cell:not(.mat-calendar-body-disabled) {

        &.mat-calendar-body-active {
          &:focus {
            .mat-calendar-body-cell-content:not(.mat-calendar-body-selected).mat-focus-indicator.mat-calendar-body-today {
              background-color: rgba(0,0,0,.04);
            }
          }
        }
      }

Upvotes: 3

Manuel Brás
Manuel Brás

Reputation: 513

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

Upvotes: 6

alin0509
alin0509

Reputation: 551

Maybe this can help you

<td role="gridcell" class="mat-calendar-body-cell mat-calendar-body-active ng-star-inserted" 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 class="mat-calendar-body-cell-content mat-focus-indicator mat-calendar-body-selected mat-calendar-body-today"> 14 </div>
<div aria-hidden="true" class="mat-calendar-body-cell-preview"></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

Upvotes: 0

Related Questions