Repository navigation
bug(mat-date-picker): month shown twice in date picker #33763
Description
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
The other side is really old:
components/src/lib/datepicker/calendar.ts
Lines 91 to 93 in 3b31d7b
Reproduction
Steps to reproduce:
- Visit https://material.angular.dev/components/datepicker/overview
- Click the 📆 button next to
Choose a datein theBasic datepickerbox - See the current month and current year at the top left
- 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
Activity
PreethiPantangi commentedon Sep 21, 2026
@crisbeto @tjshiu I worked on this issue and opened PR #33844 with the fix. Thanks!
PreethiPantangi commentedon Sep 22, 2026
Hi @crisbeto, Based on your feedback from my recent PR, I traced how label and labelMinRequiredCells flow from MatCalendarBody through the month/year views. Based on that investigation, I’m planning to remove the label and labelMinRequiredCells bindings from MatCalendarBody entirely rather than introducing a showLabel flag. Specifically, I plan to:
Remove the label and labelMinRequiredCells inputs, the label that adds an extra row to the calendar body, _monthLabel/_yearLabel, and their template bindings.
Clean up the M2/M3 tokens that are only used for the label styling.
Regenerate the API golden and add tests covering zero and nonzero offsets.
I plan to leave the row-0 spacer in place. For offsets >= 3, it will simply be empty instead of containing the label. Based on the existing comments, removing that cell (or adding aria-hidden) appears to affect NVDA's weekday announcements.
I also checked mat-multi-year-view, and it doesn't pass either label or labelMinRequiredCells to MatCalendarBody, so the scope appears to be limited to the month/year views.
There are two things I'm still unsure about:
MatMonthView and MatYearView are annotated as @docs-private, and I couldn't find a standalone/headerless use of them in the repo. Is there a use case I'm missing where they're rendered without the MatCalendar header? If so, removing the label would also remove the only month/year indicator in that scenario.
MatCalendarBody is also @docs-private, but it is still re-exported from public-api.ts. Would removing these inputs require the usual breaking-change handling, or does @docs-private mean this can be removed without that treatment?
I'd appreciate your input and feedback. Thank you!