angulartypescriptangular-materialangular8mat-datepicker

How to hide year toggle from header in mat-datepicker

enter image description here

.mat-calendar-period-button{
min-width: 0;
display: none !important; 
}

button.mat-calendar-period-button.mat-button.mat-button-base {
display: none !important;
}

button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled),  
[type="submit"]:not(:disabled) {
cursor: pointer;
display: none !important;
}

I used this CSS but it didn't work.

Solution

  • If you have standard ViewEncapsulation, you need to add ::ng-deep to styles which are inside a component you are using. Try this:

    :host ::ng-deep .mat-calendar-period-button{
  display: none; 
}