Skip to content

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

Open
PreethiPantangi wants to merge 2 commits into
angular:mainfrom
PreethiPantangi:main
Open

PreethiPantangi wants to merge 2 commits into
angular:mainfrom
PreethiPantangi:main

Conversation

@PreethiPantangi

@PreethiPantangi PreethiPantangi commented Sep 21, 2026

Copy link
Copy Markdown

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

MatCalendar always renders a header that displays the current month/year. MatMonthView can also render the month label inside the calendar grid when there are enough leading empty cells, causing the month to be displayed and announced twice. The in-grid label can't be made aria-hidden, as this affects NVDA's weekday column count.

Fix
Add a showLabel input to MatMonthView, defaulting to true to preserve the behavior of standalone @docs-private usages. MatCalendar passes false since its header already displays the month/year. I also ran pnpm approve-api datepicker, updating the golden API files for the datepicker package.

Fixes #33763

Testing:
pnpm test datepicker

Before

Date.Picker.Before.mp4

After

Date.Picker.After.mp4

@google-cla

google-cla Bot commented Sep 21, 2026

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@crisbeto crisbeto left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are several things wrong with this:

  1. The reason we haven't fixed it ourselves is because it'll require a lot of cleanup internally.
  2. It's not a good approach, because it leaves an empty row behind.
  3. We shouldn't introduce a new API for opting out of it. If users wanted to hit this, they could do it with a style override already.

@PreethiPantangi

Copy link
Copy Markdown
Author

There are several things wrong with this:

  1. The reason we haven't fixed it ourselves is because it'll require a lot of cleanup internally.
  2. It's not a good approach, because it leaves an empty row behind.
  3. We shouldn't introduce a new API for opting out of it. If users wanted to hit this, they could do it with a style override already.

Thanks for the feedback @crisbeto, 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:

  1. Remove the label and labelMinRequiredCells inputs, the label that adds an extra row to the calendar body, _monthLabel/_yearLabel, and their template bindings.
  2. Clean up the M2/M3 tokens that are only used for the label styling.
  3. 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:

  1. 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.
  2. 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!

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants