预填充[matDatepickerFilter]导致表单失效,如何禁用已被前置输入框选中的日期?
[matDatepickerFilter]导致表单失效,如何禁用已被前置输入框选中的日期?
各位好,我现在遇到个棘手的问题:想让Angular Material日期选择器里,那些已经被前面输入框选中过的日期变成不可选状态,但用matDatepickerFilter实现这个逻辑时,居然导致整个表单失效了,有没有懂的朋友给支个招?
先说说我目前的实现思路:
- 首先定义了一个数组,用来存储所有需要禁用的日期:
disabledDates: Date[] = [];
- 然后在
ngOnChanges()钩子函数里,把后端返回的假期数据映射到表单时,会处理每条数据的日期字段:
this.location.holidayHours.map((holiday: any, index) => { if (holiday.date && holiday.from) { holiday.date = // 这里本来是要把后端返回的日期转换成标准Date对象,之后打算把它加到disabledDates数组里,不过代码还没写完 } })
我原本计划用matDatepickerFilter过滤掉disabledDates里的日期,但一启用这个过滤器,表单就出现异常——要么是日期选择器无法正常选中日期,要么是表单提交时状态不对。有没有正确的方式实现“禁用已被前置输入框选中的日期”这个需求,同时又不影响表单的正常功能?
备注:内容来源于stack exchange,提问作者Bjorn
相关产品推荐
相关产品推荐

