ExtJS 6.2中如何在DateField组件禁用指定日期之前的所有日期？

完全可以实现，ExtJS的DateField组件提供了专门的配置项和方法来达成这个需求，核心是使用minDate配置或setMinDate方法。

1. 静态初始化时设置 #

创建DateField组件时，直接通过minDate配置项指定允许选择的最小日期。推荐用ExtJS内置的Ext.Date.parse方法解析YYYY-MM-DD格式的字符串，避免浏览器对日期字符串解析的兼容性问题：

Ext.create('Ext.form.field.Date', {
    id: 'myDateField',
    renderTo: Ext.getBody(),
    fieldLabel: '选择日期',
    format: 'Y-m-d', // 与输入/显示格式匹配
    // 解析指定日期字符串为Date对象，作为最小可选日期
    minDate: Ext.Date.parse('2024-06-01', 'Y-m-d')
});

设置完成后，日期选择器中所有早于2024-06-01的日期会自动灰化，无法被选中。

2. 动态修改最小日期 #

如果需要在组件创建后调整禁用的起始日期，调用setMinDate方法即可：

// 获取DateField组件实例
var dateField = Ext.getCmp('myDateField');
// 动态更新最小可选日期
var newMinDate = Ext.Date.parse('2024-07-01', 'Y-m-d');
dateField.setMinDate(newMinDate);

执行后，日期选择器的禁用范围会立刻更新为新指定日期之前的所有日期。

注意事项 #

• 使用Ext.Date.parse解析日期时，第二个参数的格式标记要与目标字符串严格对应（Y代表四位年份，m代表两位月份，d代表两位日期）。
• 直接使用new Date('YYYY-MM-DD')在部分旧浏览器可能出现解析异常，优先选择Ext.Date.parse方法。

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