ExtJS dateField如何禁用全部日期仅启用动态数组指定日期

你可以通过dateField组件自带的disabledDates配置项实现需求，具体步骤如下：

实现逻辑 #

Ext.form.field.Date的disabledDates支持传入自定义函数，函数接收当前待渲染的日期对象作为入参，返回true代表禁用该日期，返回false代表启用。我们只需要将允许的日期提前转换为统一的时间戳集合，对比当前日期是否在允许集合内即可。

完整代码示例 #

首先处理你的允许日期数组，统一转换为时分秒清零的时间戳，避免格式/时区问题导致匹配失败：

// 你的允许日期数组
const allowedDates = ['1.12.21', '25.11.21', '3.12.21', '8.10.21'];
// 转换为时间戳集合，日期格式为 dd.MM.yy
const allowedTimestamps = allowedDates.map(dateStr => {
  const [day, month, year] = dateStr.split('.');
  // 月份从0开始计数，同时将时分秒清零避免匹配误差
  return new Date(+year, +month - 1, +day, 0, 0, 0).getTime();
});

然后创建dateField时配置禁用规则：

Ext.create('Ext.form.field.Date', {
  renderTo: Ext.getBody(),
  fieldLabel: '选择日期',
  format: 'd.m.y', // 与你使用的日期格式保持一致
  disabledDates: function(currentDate) {
    // 清空当前日期的时分秒后对比时间戳
    const currentTs = Ext.Date.clearTime(currentDate).getTime();
    // 不在允许列表内的日期全部禁用
    return !allowedTimestamps.includes(currentTs);
  }
});

动态更新允许日期的处理 #

如果你的允许日期数组是动态变化的，只需要更新allowedTimestamps集合后，调用如下方法刷新日历面板即可即时生效：

// 替换为你的dateField实例
dateField.getPicker().refresh();

低版本ExtJS兼容处理 #

如果你使用的ExtJS版本不支持disabledDates传入函数，可以将允许日期转换为正则数组后，通过setDisabledDates方法动态设置禁用规则即可。

内容的提问来源于stack exchange，提问作者stranges