Angular Material DatePicker 禁用日期无法正常工作

Question

我正在使用 Angular 材料日期选择器 (V 9.2.4)，并且在禁用日期（日）选择时遇到问题。即使在仅允许选择年份和月份的日期选择器示例中（请参阅仅选择年份和月份的官方日期选择器示例），它也不起作用。当您在带有年份的下拉组件下的列表中选择年份时，它会起作用。选择年份后，您将看到月份选择，选择月份后，日期选择器将关闭。但如果你点击下拉列表多年（在我的第一个屏幕截图中用红色箭头标记），它就不会（见图片）。

有什么办法可以禁用日期（日）选择吗？就我而言，我需要这个，因为背后的服务只需要选择月份和年份。该应用程序会自动将我这边的日期设置为 1，如果用户可以选择日期，则会造成混乱。

Answer 1

我终于找到了解决我的问题的方法。您可以使用样式禁用年份选择下拉菜单，因为您可以通过单击控件中的箭头来浏览年份列表以选择所需的年份。

该问题可以通过...解决

1. 在使用日期选择器的组件的 .scss 文件中设置以下样式

   ::ng-deep .date-picker .mat-calendar-period-button { 显示：无；}

2. 在全局 styles.scss 文件中设置以下样式

   .date-picker .mat-calendar-period-button { 显示：无；}

之后您要做的就是将此样式设置为材质日期选择器的 panelClass 属性。

尽管我找到了解决方案，但我对此并不满意，因为这两种解决方案都不完美。第一个使用::ng-deep 的解决方案并不完美，因为 ::ng-deep 正在讨论中并已被弃用。第二个解决方案（就我而言）并不完美，因为我编写的组件位于我们自己的库之一中。如果我使用该解决方案，则意味着使用该库的每个应用程序都必须将该样式添加到全局样式中。这是一个远非完美的解决方案。