You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

预填充[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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.13 17:03:19