CODEWITHSUNDEEP
angular-material
TBA
TBA

Reputation: 1197

How to Hide Calendar Header (calendarHeaderComponent) in Mat Date Picker

I have added a date Picker:

<mat-form-field appearance="outline" class="pad-20">
        <mat-label>Monthly Scheduling Day</mat-label>
        <input matInput [matDatepickerFilter]="monthlyDateFilter" [matDatepicker]="testPicker"
          (dateChange)="onDateSelectionChange('Monthly', $event)" onkeypress="return false;"
          [formControl]="monthlyDatePickerForm">
        <mat-datepicker-toggle matSuffix [for]="testPicker"></mat-datepicker-toggle>
        <mat-datepicker #testPicker></mat-datepicker>
      </mat-form-field>

And I do not want the Calendar header component

enter image description here

It should somewhat looks like the below image

enter image description here

What option I could use to get that working.

Upvotes: 0

Views: 4128

Answers (1)

Matt Penner
Matt Penner

Reputation: 1124

While this is old I came looking for this same solution and did not see an answer.

I found this can be done by using the calendarHeaderComponent feature, available since at least Material v6.4.7. You can follow the published example here to create and use a custom header component. However, simply define and pass a blank component:

/** Custom header component for datepicker. */
@Component({
  selector: 'blank-header',
  template: ``,
  standalone: true,
})
export class BlankHeader<D> {}

This will create the following output:

enter image description here

Upvotes: 0

Related Questions