【问题标题】:Angular Material DatePicker disable days not working correctlyAngular Material DatePicker 禁用天数无法正常工作
【发布时间】:2020-11-04 16:35:54
【问题描述】:
我正在使用 Angular 材料日期选择器 (V 9.2.4),但在禁用日期(日)选择时遇到问题。即使在仅允许选择年份和月份的日期选择器示例中(参见official datepicker example with only year and month selection),它也不起作用。当您在带有年份的下拉组件下的列表中选择年份时,它会起作用。选择一年后,您将看到月份选择,选择一个月后,日期选择器关闭。但是如果你点击下拉列表多年(在我的第一个屏幕截图中用红色箭头标记),它不会(见图)。
有什么方法可以禁用日期(天)选择吗?就我而言,我需要这个,因为后面的服务只需要选择月份和年份。应用程序自动将我这边的日期设置为 1,如果用户可以选择一天,那会很混乱。
【问题讨论】:
标签:
datepicker
angular-material
【解决方案1】:
我终于找到了解决我问题的方法。您可以禁用带有样式的年份选择下拉菜单,因为您可以通过单击控件中的箭头来浏览年份列表以选择所需的年份。
问题可以通过...解决
-
在使用日期选择器的组件的 .scss 文件中设置以下样式
::ng-deep .date-picker .mat-calendar-period-button {
显示:无;
}
-
在全局styles.scss文件中设置如下样式
.date-picker .mat-calendar-period-button {
显示:无;
}
之后您要做的就是将此样式设置为材质日期选择器的 panelClass 属性。
虽然我找到了一个解决方案,但我对此并不满意,因为这两种解决方案都不完美。 ::ng-deep 的第一个解决方案并不完美,因为 ::ng-deep 正在讨论中并已弃用。第二种解决方案(在我的情况下)并不完美,因为我编写的组件位于我们自己的库之一中。如果我使用该解决方案,则意味着使用此库的每个应用程序都必须将该样式添加到全局样式中。这是一个远非完美的解决方案。