fix(material/datepicker): avoid showing month label twice in calendar

goldens/material/datepicker/index.api.md

@@ -702,6 +702,7 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
     get selected(): DateRange<D> | D | null;
     set selected(value: DateRange<D> | D | null);
     readonly selectedChange: EventEmitter<D | null>;
+    showLabel: boolean;
     startDateAccessibleName: string | null;
     _todayDate: i0.WritableSignal<number | null>;
     _updateActiveDate(event: MatCalendarUserEvent<number>): void;
@@ -713,7 +714,7 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
     }[]>;
     _weeks: i0.WritableSignal<MatCalendarCell<any>[][]>;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatMonthView<any>, "mat-month-view", ["matMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; "activeDrag": { "alias": "activeDrag"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatMonthView<any>, "mat-month-view", ["matMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; "activeDrag": { "alias": "activeDrag"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMonthView<any>, never>;
 }

src/material/datepicker/calendar-body.html

@@ -2,7 +2,7 @@
   If there's not enough space in the first row, create a separate label row. We mark this row as
   aria-hidden because we don't want it to be read out as one of the weeks in the month.
 -->
-@if (_firstRowOffset < labelMinRequiredCells) {
+@if (_firstRowOffset < labelMinRequiredCells && label) {
   <tr aria-hidden="true">
     <td class="mat-calendar-body-label"
         [attr.colspan]="numCols"

src/material/datepicker/calendar.html

@@ -5,6 +5,7 @@
     @case ('month') {
         <mat-month-view
             [(activeDate)]="activeDate"
+            [showLabel]="false"
             [selected]="selected"
             [dateFilter]="dateFilter"
             [maxDate]="maxDate"

src/material/datepicker/calendar.spec.ts

@@ -71,6 +71,13 @@ describe('MatCalendar', () => {
       expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31));
     });
 
+    it('should not show a redundant month label in the calendar body', () => {
+      expect(periodButton.textContent).toContain('JAN');
+
+      const labelEls = calendarElement.querySelectorAll('.mat-calendar-body-label');
+      expect(labelEls.length).toBe(0);
+    });
+
     it('should select date in month view', () => {
       let monthCells = calendarElement.querySelectorAll('.mat-calendar-body-cell');
       (monthCells[monthCells.length - 1] as HTMLElement).click();

src/material/datepicker/month-view.spec.ts

@@ -68,6 +68,18 @@ describe('MatMonthView', () => {
         expect(labelEl.innerHTML.trim()).toBe('JAN');
       });
 
+      it('does not render a month label when showLabel is false', () => {
+        const noLabelFixture = TestBed.createComponent(StandardMonthView);
+        noLabelFixture.componentInstance.showLabel = false;
+        noLabelFixture.detectChanges();
+
+        const noLabelNativeElement = noLabelFixture.debugElement.query(
+          By.directive(MatMonthView),
+        )!.nativeElement;
+        let labelEl = noLabelNativeElement.querySelector('.mat-calendar-body-label');
+        expect(labelEl).toBeNull();
+      });
+
       it('has 31 days', () => {
         let cellEls = monthViewNativeElement.querySelectorAll('.mat-calendar-body-cell')!;
         expect(cellEls.length).toBe(31);
@@ -839,6 +851,7 @@ describe('MatMonthView', () => {
     <mat-month-view
       [(activeDate)]="date"
       [(selected)]="selected"
+      [showLabel]="showLabel"
       (selectedChange)="selectedChangeSpy($event)"
       (_userSelection)="userSelectionSpy($event)"
       (dragStarted)="dragStarted($event)"
@@ -850,6 +863,7 @@ describe('MatMonthView', () => {
 })
 class StandardMonthView {
   date = new Date(2017, JAN, 5);
+  showLabel = true;
   selected: Date | DateRange<Date> = new Date(2017, JAN, 10);
   selectedChangeSpy = jasmine.createSpy('selectedChange');
   userSelectionSpy = jasmine.createSpy('userSelection');

src/material/datepicker/month-view.ts

@@ -144,6 +144,11 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
   /** Function that can be used to add custom CSS classes to dates. */
   @Input() dateClass!: MatCalendarCellClassFunction<D>;
 
+  /**
+   * Whether to show the month label above the calendar grid.
+   */
+  @Input() showLabel: boolean = true;
+
   /** Start of the comparison range. */
   @Input() comparisonStart: D | null = null;
 
@@ -401,11 +406,13 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
     this._setRanges(this.selected);
     this._todayDate.set(this._getCellCompareValue(this._dateAdapter.today()));
     this._monthLabel.set(
-      this._dateFormats.display.monthLabel
-        ? this._dateAdapter.format(this.activeDate, this._dateFormats.display.monthLabel)
-        : this._dateAdapter
-            .getMonthNames('short')
-            [this._dateAdapter.getMonth(this.activeDate)].toLocaleUpperCase(),
+      this.showLabel
+        ? this._dateFormats.display.monthLabel
+          ? this._dateAdapter.format(this.activeDate, this._dateFormats.display.monthLabel)
+          : this._dateAdapter
+              .getMonthNames('short')
+              [this._dateAdapter.getMonth(this.activeDate)].toLocaleUpperCase()
+        : '',
     );
 
     let firstOfMonth = this._dateAdapter.createDate(