Angular Material DatePicker disable days not working correctly

Question

I am using Angular material datepicker (V 9.2.4) and have problems to disable the date (day) selection. Even in the example for the datepicker that allows only year and month selection (see at official datepicker example with only year and month selection) it does not work. It works, when you select a year in the list under the dropdown component with years. After having selected a year, you will see the month selection and after having selected a month, the datepicker closes. But if you click onto the dropdown list for years (marked with the red arrow in my first screenshot), it doesn't (see pictures).

Is there any way to disable the date (day) selection? In my case I need this as the service behind only needs the month and year selection. The application sets the day on my side automatically to 1 and if a user could select a day, it would be confusing.

Answer 1

I finally found a solution to solve my problem. You can disable the year selection drop down with styles what is okay because you can navigate through the years list by clicking the arrows in the control to select the desired year.

The problem can be solved by ...

1. setting the following style in the .scss file of the component that is using the datepicker

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

2. setting the following style in the global styles.scss file

   .date-picker .mat-calendar-period-button { display: none; }

What you have to do afterwards is setting this style to the panelClass property of the material datepicker.

Although I found a solution I am not happy with that because both solutions are not perfect. The first solution with ::ng-deep is not perfect because ::ng-deep is in discussion and deprecated. The second solution is (in my case) not perfect because the component I wrote is located in one of our own libraries. If I would use that solution it would mean that every application that uses this libary has to add that style to the global styles. This is a solution that is far away from being perfect.

Answer 2

I'm not sure if this is still being looked at, but we faced the same problem, and solved it by simply hiding the selector in styles.scss, see script below.

button.mat-focus-indicator.mat-calendar-period-button.mat-button.mat-button-base {
    pointer-events: none;
    visibility: hidden;
}

Downside is that the multi-year cannot be selected by the user.