diff --git a/goldens/material/datepicker/index.api.md b/goldens/material/datepicker/index.api.md index 5437928453b3..488a1ff85c26 100644 --- a/goldens/material/datepicker/index.api.md +++ b/goldens/material/datepicker/index.api.md @@ -702,6 +702,7 @@ export class MatMonthView implements AfterContentInit, OnChanges, OnDestroy { get selected(): DateRange | D | null; set selected(value: DateRange | D | null); readonly selectedChange: EventEmitter; + showLabel: boolean; startDateAccessibleName: string | null; _todayDate: i0.WritableSignal; _updateActiveDate(event: MatCalendarUserEvent): void; @@ -713,7 +714,7 @@ export class MatMonthView implements AfterContentInit, OnChanges, OnDestroy { }[]>; _weeks: i0.WritableSignal[][]>; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "mat-month-view", ["matMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; "activeDrag": { "alias": "activeDrag"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-month-view", ["matMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; "activeDrag": { "alias": "activeDrag"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration, never>; } diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html index 1b6c113fe87e..177c12308d71 100644 --- a/src/material/datepicker/calendar-body.html +++ b/src/material/datepicker/calendar-body.html @@ -2,7 +2,7 @@ If there's not enough space in the first row, create a separate label row. We mark this row as aria-hidden because we don't want it to be read out as one of the weeks in the month. --> -@if (_firstRowOffset < labelMinRequiredCells) { +@if (_firstRowOffset < labelMinRequiredCells && label) { { expect(calendarInstance.activeDate).toEqual(new Date(2017, JAN, 31)); }); + it('should not show a redundant month label in the calendar body', () => { + expect(periodButton.textContent).toContain('JAN'); + + const labelEls = calendarElement.querySelectorAll('.mat-calendar-body-label'); + expect(labelEls.length).toBe(0); + }); + it('should select date in month view', () => { let monthCells = calendarElement.querySelectorAll('.mat-calendar-body-cell'); (monthCells[monthCells.length - 1] as HTMLElement).click(); diff --git a/src/material/datepicker/month-view.spec.ts b/src/material/datepicker/month-view.spec.ts index c444fc394140..47dff07c80e7 100644 --- a/src/material/datepicker/month-view.spec.ts +++ b/src/material/datepicker/month-view.spec.ts @@ -68,6 +68,18 @@ describe('MatMonthView', () => { expect(labelEl.innerHTML.trim()).toBe('JAN'); }); + it('does not render a month label when showLabel is false', () => { + const noLabelFixture = TestBed.createComponent(StandardMonthView); + noLabelFixture.componentInstance.showLabel = false; + noLabelFixture.detectChanges(); + + const noLabelNativeElement = noLabelFixture.debugElement.query( + By.directive(MatMonthView), + )!.nativeElement; + let labelEl = noLabelNativeElement.querySelector('.mat-calendar-body-label'); + expect(labelEl).toBeNull(); + }); + it('has 31 days', () => { let cellEls = monthViewNativeElement.querySelectorAll('.mat-calendar-body-cell')!; expect(cellEls.length).toBe(31); @@ -839,6 +851,7 @@ describe('MatMonthView', () => { { }) class StandardMonthView { date = new Date(2017, JAN, 5); + showLabel = true; selected: Date | DateRange = new Date(2017, JAN, 10); selectedChangeSpy = jasmine.createSpy('selectedChange'); userSelectionSpy = jasmine.createSpy('userSelection'); diff --git a/src/material/datepicker/month-view.ts b/src/material/datepicker/month-view.ts index 8d248096a9c6..0bdf453cb5fa 100644 --- a/src/material/datepicker/month-view.ts +++ b/src/material/datepicker/month-view.ts @@ -144,6 +144,11 @@ export class MatMonthView implements AfterContentInit, OnChanges, OnDestroy { /** Function that can be used to add custom CSS classes to dates. */ @Input() dateClass!: MatCalendarCellClassFunction; + /** + * Whether to show the month label above the calendar grid. + */ + @Input() showLabel: boolean = true; + /** Start of the comparison range. */ @Input() comparisonStart: D | null = null; @@ -401,11 +406,13 @@ export class MatMonthView implements AfterContentInit, OnChanges, OnDestroy { this._setRanges(this.selected); this._todayDate.set(this._getCellCompareValue(this._dateAdapter.today())); this._monthLabel.set( - this._dateFormats.display.monthLabel - ? this._dateAdapter.format(this.activeDate, this._dateFormats.display.monthLabel) - : this._dateAdapter - .getMonthNames('short') - [this._dateAdapter.getMonth(this.activeDate)].toLocaleUpperCase(), + this.showLabel + ? this._dateFormats.display.monthLabel + ? this._dateAdapter.format(this.activeDate, this._dateFormats.display.monthLabel) + : this._dateAdapter + .getMonthNames('short') + [this._dateAdapter.getMonth(this.activeDate)].toLocaleUpperCase() + : '', ); let firstOfMonth = this._dateAdapter.createDate(