如何允许用户在jQuery Datepicker输入框中按规范格式手动输入日期

要让用户能按dd-MM-yy格式手动输入有效日期，你需要调整Datepicker的配置并添加输入验证逻辑，具体步骤如下：

1. 修改Datepicker配置，解除输入限制 #

默认情况下，jQuery Datepicker的constrainInput选项为true，会限制输入仅允许数字和与当前日期格式匹配的特定字符。你需要将其设为false，允许用户输入连字符等符号：

var currentTime = new Date();
var startDateFrom = new Date(currentTime.getFullYear(),currentTime.getMonth()-2);
var datePickerOptions = {
    dateFormat: 'dd-MM-yy',
    monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    changeYear: true,
    changeMonth: true,
    maxDate: '0',
    minDate: startDateFrom,
    constrainInput: false, // 关键：解除输入字符限制
    onClose: function(dateText, inst) {
        // 验证输入的日期格式与有效性
        if (dateText) {
            try {
                // 尝试解析输入的日期
                var parsedDate = $.datepicker.parseDate('dd-MM-yy', dateText, inst.settings);
                // 验证日期范围
                var minDate = inst.settings.minDate;
                var maxDate = inst.settings.maxDate;
                if (parsedDate < minDate || parsedDate > maxDate) {
                    alert(`日期需在${$.datepicker.formatDate('dd-MM-yy', minDate)}到${$.datepicker.formatDate('dd-MM-yy', maxDate)}之间`);
                    $(this).val('');
                } else {
                    // 统一格式化正确的日期显示
                    $(this).val($.datepicker.formatDate('dd-MM-yy', parsedDate));
                }
            } catch (e) {
                alert('请输入符合格式的日期（如：01-Jan-24）');
                $(this).val('');
            }
        }
    }
};

$(document).ready(function() {
   $('#myHeader').on( 'draw.dt', function () {  
       $(".datepickerColumn").datepicker(datePickerOptions);
   });
})

2. 可选：添加输入时的格式辅助（提升体验） #

如果想让用户输入时自动补全连字符，避免手动输入的繁琐，可以给输入框绑定input事件：

$(document).ready(function() {
    $('#myHeader').on('draw.dt', function() {  
        $(".datepickerColumn").datepicker(datePickerOptions)
        .on('input', function() {
            var val = $(this).val().replace(/[^0-9A-Za-z-]/g, ''); // 过滤非法字符
            // 自动插入连字符：第2位数字后加'-'，第6位字符后加'-'
            if (val.length === 2 && !val.includes('-')) {
                $(this).val(val + '-');
            } else if (val.length === 6 && val.charAt(2) === '-' && !val.includes('-', 3)) {
                $(this).val(val + '-');
            }
        });
    });
});

关键说明 #

• constrainInput: false是核心配置，它取消了Datepicker对输入字符的强制限制，允许用户输入连字符和月份缩写。
• onClose事件用于在用户完成输入后，验证日期的格式正确性和范围合法性，避免无效日期提交。
• 可选的input事件处理可以引导用户按指定格式输入，减少错误率。

内容的提问来源于stack exchange，提问作者Nandha Kumar Gandhi