fix(datetimepicker): resolve issue with active cell highlighting

projects/extensions/datetimepicker/calendar-body.html

@@ -6,39 +6,41 @@
   <tr aria-hidden="true">
     <td class="mtx-calendar-body-label" [attr.colspan]="numCols">{{ label }}</td>
   </tr>
-}
-
-<!-- Create the first row separately so we can include a special spacer cell. -->
-@for (row of rows; track row; let rowIndex = $index) {
+  }
+  
+  <!-- Create the first row separately so we can include a special spacer cell. -->
+  @for (row of rows; track rowIndex; let rowIndex = $index) {
   <tr role="row">
     <!--
-      We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.
-    -->
+        We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.
+      -->
     @if (rowIndex === 0 && _firstRowOffset) {
-      <td
-        class="mtx-calendar-body-label" [attr.colspan]="_firstRowOffset" aria-hidden="true">
-        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}
-      </td>
-    }
-    @for (item of row; track item; let colIndex = $index) {
-      <td
-        role="gridcell"
-        class="mtx-calendar-body-cell"
-        [class.mtx-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
-        [class.mtx-calendar-body-disabled]="!item.enabled"
-        [tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
-        [attr.data-mat-row]="rowIndex"
-        [attr.data-mat-col]="colIndex"
-        [attr.aria-label]="item.ariaLabel"
-        [attr.aria-disabled]="!item.enabled || null"
-        (click)="_cellClicked(item)">
-        <div class="mtx-calendar-body-cell-content"
-          [class.mtx-calendar-body-selected]="selectedValue === item.value"
-          [class.mtx-calendar-body-today]="todayValue === item.value"
-          [attr.aria-selected]="selectedValue === item.value">
-          {{ item.displayValue }}
-        </div>
-      </td>
+    <td class="mtx-calendar-body-label" [attr.colspan]="_firstRowOffset" aria-hidden="true">
+      {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}
+    </td>
+    } @for (item of row; track item.displayValue; let colIndex = $index) {
+    <td
+      role="gridcell"
+      class="mtx-calendar-body-cell"
+      [class.mtx-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
+      [class.mtx-calendar-body-disabled]="!item.enabled"
+      [tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
+      [attr.data-mat-row]="rowIndex"
+      [attr.data-mat-col]="colIndex"
+      [attr.aria-label]="item.ariaLabel"
+      [attr.aria-disabled]="!item.enabled || null"
+      (click)="_cellClicked(item)"
+    >
+      <div
+        class="mtx-calendar-body-cell-content"
+        [class.mtx-calendar-body-selected]="selectedValue === item.value"
+        [class.mtx-calendar-body-today]="todayValue === item.value"
+        [attr.aria-selected]="selectedValue === item.value"
+      >
+        {{ item.displayValue }}
+      </div>
+    </td>
     }
   </tr>
-}
+  }
+

projects/extensions/datetimepicker/month-view.html

@@ -1,17 +1,19 @@
 <table class="mtx-calendar-table" role="grid">
   <thead class="mtx-calendar-table-header">
     <tr>
-      @for (day of _weekdays; track day) {
-        <th [attr.aria-label]="day.long">{{day.narrow}}</th>
+      @for (day of _weekdays; track day.long) {
+      <th [attr.aria-label]="day.long">{{day.narrow}}</th>
       }
     </tr>
   </thead>
-  <tbody mtx-calendar-body
+  <tbody
+    mtx-calendar-body
     (@slideCalendar.done)="_calendarStateDone()"
     [@slideCalendar]="_calendarState"
     [rows]="_weeks"
     [todayValue]="_todayDate!"
-    [activeCell]="_adapter.getDate(activeDate) - 1"
+    [activeCell]="_getActiveCell()"
     [selectedValue]="_selectedDate!"
-    (selectedValueChange)="_dateSelected($event)"></tbody>
+    (selectedValueChange)="_dateSelected($event)"
+  ></tbody>
 </table>

projects/extensions/datetimepicker/month-view.ts

@@ -90,6 +90,7 @@ export class MtxMonthView<D> implements AfterContentInit {
     this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
 
     this._activeDate = this._adapter.today();
+    this._selected = this._adapter.today();
   }
 
   private _activeDate: D;
@@ -145,6 +146,7 @@ export class MtxMonthView<D> implements AfterContentInit {
     );
     this.selectedChange.emit(dateObject);
     this._activeDate = dateObject;
+    this.selected = dateObject;
 
     if (this.type === 'date') {
       this._userSelection.emit();
@@ -214,4 +216,34 @@ export class MtxMonthView<D> implements AfterContentInit {
   private calendarState(direction: string): void {
     this._calendarState = direction;
   }
+
+  /**
+   * Gets the index of the cell that should be highlighted in the month view.
+   * Used to highlight either the selected date or today's date in the calendar.
+   *
+   * Highlighting priority:
+   * 1. Currently selected date (if it's in the displayed month)
+   * 2. Today's date (if it's in the displayed month)
+   * 3. No highlight (-1) if neither date is in the current month
+   *
+   * @returns Zero-based index of the cell to highlight, or -1 if no cell should be highlighted
+   */
+  protected _getActiveCell(): number {
+    if (!this.activeDate || !this._adapter) {
+      return -1;
+    }
+
+    // Check if selected date is in current month - highlight it if so
+    if (this.selected && this._adapter.sameMonthAndYear(this.activeDate, this.selected)) {
+      return Math.max(0, this._adapter.getDate(this.selected) - 1);
+    }
+
+    // Otherwise highlight today's date if it's in the current month and not selected
+    const today = this._adapter.today();
+    if (!this.selected && this._adapter.sameMonthAndYear(this.activeDate, today)) {
+      return Math.max(0, this._adapter.getDate(today) - 1);
+    }
+
+    return -1;
+  }
 }