#33763·components

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

Author: jsorefCreated Sep 2, 2026Updated Sep 9, 2026
LabelsP4area: material/datepickergemini-triaged

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