bug(mat-date-picker): month shown twice in date picker

[jsoref]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The month appears twice in the date picker, once in the month-year element at the top

#mat-datepicker-0 > mat-calendar-header > div > div > button.mdc-button.mat-mdc-button-base.mat-calendar-period-button.mat-mdc-button.mat-unthemed > span.mdc-button__label > span

SEP 2026

and then again in the body of the calendar below the days of week headers

#mat-datepicker-0 > div > mat-month-view > table > tbody > tr:nth-child(1) > td.mat-calendar-body-label

SEP

---

Some of this code is from:

components/src/material/datepicker/calendar.ts

Lines 162 to 164 in a69732f

	this._periodButtonText = adapter
	.format(calendar.activeDate, this._dateFormats.display.monthYearLabel)
	.toLocaleUpperCase();

The other side is really old:

components/src/lib/datepicker/calendar.ts

Lines 91 to 93 in 3b31d7b

	return this._monthView ?
	this._dateAdapter.format(this._activeDate, this._dateFormats.display.monthYearLabel)
	.toLocaleUpperCase() :

Reproduction

Steps to reproduce:

1. Visit https://material.angular.dev/components/datepicker/overview
2. Click the 📆 button next to Choose a date in the Basic datepicker box
3. See the current month and current year at the top left
4. See the current month again two lines below

Expected Behavior

Don't show the current month again below the days of the week when in day picker mode and the month is shown at the top.

Actual Behavior

The month is shown twice.

Environment

• Angular: 21.2.9
• CDK/Material: 21.2.9
• Browser(s): chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS