如何禁用ExtJS6 DateField的自动校正功能？

ExtJS6的DateField默认会自动校正非法日期（比如输入2月30日会被转为3月2日），这和「仅提示无效日期、不自动修改输入」的需求冲突。你之前尝试的validator方案失效，是因为Ext.Date.parse本身就会自动修正日期，无法识别输入的原始非法值。

核心思路 #

要实现严格校验，必须：

1. 绕过ExtJS自带的日期解析自动校正逻辑
2. 自己实现严格的日期合法性校验，直接校验年、月、日的真实日历规则

具体实现 #

1. 严格日期校验函数

这个函数不依赖Ext.Date.parse，直接解析输入并校验日期合法性：

function isStrictValidDate(input, format) {
    let year, month, day;
    // 处理无分隔符格式（如02302022）
    if (format === 'mdY') {
        if (input.length !== 8) return false;
        month = parseInt(input.slice(0, 2), 10);
        day = parseInt(input.slice(2, 4), 10);
        year = parseInt(input.slice(4, 8), 10);
    } 
    // 处理带分隔符格式（如02/30/2022）
    else if (format === 'm/d/Y') {
        const parts = input.split('/');
        if (parts.length !== 3) return false;
        month = parseInt(parts[0], 10);
        day = parseInt(parts[1], 10);
        year = parseInt(parts[2], 10);
    } 
    else {
        return false;
    }

    // 校验月份范围
    if (month < 1 || month > 12) return false;
    // 校验当月最大天数（含闰年2月判断）
    const daysInMonth = [
        31,
        (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 29 : 28,
        31,30,31,30,31,31,30,31,30,31
    ];
    return day >= 1 && day <= daysInMonth[month - 1];
}

2. 自定义严格日期字段组件

重写DateField的关键方法，避免自动校正，同时应用严格校验：

Ext.define('MyApp.form.field.StrictDateField', {
    extend: 'Ext.form.field.Date',
    alias: 'widget.strictdatefield',

    // 重写解析逻辑，不自动转换无效日期
    parseValue: function(value) {
        return value;
    },

    // 自定义验证逻辑
    validator: function(val) {
        // 支持两种输入格式，可根据需求扩展
        const isValid = isStrictValidDate(val, 'mdY') || isStrictValidDate(val, 'm/d/Y');
        return isValid ? true : '无效日期';
    },

    // 重写失焦逻辑，避免自动修改输入
    onBlur: function() {
        const me = this;
        // 验证不通过时，保留原始输入
        if (!me.validate()) {
            me.setValue(me.rawValue);
        } 
        // 验证通过时，再格式化显示
        else {
            const parsedDate = Ext.Date.parse(me.rawValue, 'mdY') || Ext.Date.parse(me.rawValue, 'm/d/Y');
            me.setValue(parsedDate);
        }
        me.callParent(arguments);
    }
});

3. 使用自定义组件

在表单中替换原有的datefield为自定义组件：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 300,
    bodyPadding: 10,
    title: 'Dates',
    items: [{
        xtype: 'strictdatefield',
        anchor: '100%',
        fieldLabel: 'From',
        name: 'from_date'
    }]
});

效果说明 #

• 输入非法日期（如02302022、02/30/2022）时，组件会提示「无效日期」，且不会自动修改输入内容
• 输入合法日期时，会正常格式化显示

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