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

Open Beginner friendly
#33,763 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
angular, typescript
Domain
frontend

Research direction

Start by reproducing the issue in the Basic datepicker example, then read src/material/datepicker/calendar.ts around the calendar header and month-view label referenced in the report. Confirm the duplicate month appears in day-picker mode and verify that the lower month label is absent while the month-year control remains visible.

Written by the indexing model from the issue text.

Description

area: material/datepicker gemini-triaged P4
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:
https://github.com/angular/components/blob/a69732f546a5f1f43faeb0039fa08e4f7a1150f0/src/material/datepicker/calendar.ts#L162-L164
The other side is really old:
https://github.com/angular/components/blob/3b31d7b88998d3c26530436e72e1b57283e1cbde/src/lib/datepicker/calendar.ts#L91-L93

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.

Image
Environment
  • Angular: 21.2.9
  • CDK/Material: 21.2.9
  • Browser(s): chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 2h
Merged PRs (30d)
81

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from angular/components

All issues in angular/components

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.