如何限制datetime-local输入框仅支持4位年份而非6位？

当前使用的日期输入框（原type为datetime-local，现有代码采用jQuery UI Datepicker）支持输入或选择6位年份，需修改为仅允许4位年份的输入与选择。

解决方案（基于jQuery UI Datepicker） #

修改后的完整代码 #

HTML 部分

<label for="date-start">Start Date</label>
<input class="date-picker" id="date-start" type="text">
<label for="date-end">End Date</label>
<input class="date-picker" id="date-end" type="text">

JavaScript/jQuery 部分

// 获取当前日期相关信息
var yearNow = new Date().getFullYear();
var monthNow = new Date().getMonth() + 1;
var dayNow = new Date().getDate();

// 初始化日期值，确保格式为MM/DD/YYYY
document.getElementById('date-start').value = `01/01/${yearNow}`;
document.getElementById('date-end').value = `${monthNow.toString().padStart(2, '0')}/${dayNow.toString().padStart(2, '0')}/${yearNow}`;

$(function () {
    $(".date-picker").datepicker({
        // 限制可选年份范围为1900到当前年份+10，仅显示4位年份
        yearRange: "1900:" + (yearNow + 10),
        // 指定日期输出格式，确保年份为4位
        dateFormat: "mm/dd/yy",
        // 拦截不符合规则的手动输入
        beforeShow: function(input) {
            $(input).keydown(function(e) {
                // 允许的按键：控制键、数字、斜杠
                var allowedKeys = [8, 9, 13, 27, 46, 110, 190, 37, 38, 39, 40];
                var keyCode = e.keyCode;
                var inputVal = $(this).val();
                var yearSegment = inputVal.split('/')[2] || '';

                // 若年份部分已达4位，阻止额外输入
                if (inputVal.split('/').length === 3 && yearSegment.length >= 4 && !allowedKeys.includes(keyCode)) {
                    e.preventDefault();
                    return false;
                }

                // 仅允许数字和指定控制键
                if ((keyCode < 48 || keyCode > 57) && !allowedKeys.includes(keyCode)) {
                    e.preventDefault();
                    return false;
                }
            });
        }
    });

    // 失焦时验证年份格式，不符合则重置并提示
    $(".date-picker").blur(function() {
        var val = $(this).val();
        var dateParts = val.split('/');
        if (dateParts.length === 3) {
            var year = dateParts[2];
            if (year.length !== 4 || isNaN(year)) {
                $(this).val(`${dateParts[0]}/${dateParts[1]}/${yearNow}`);
                alert('年份必须为4位有效数字');
            }
        }
    });
});

关键修改说明 #

• 年份范围锁定：通过yearRange参数限定可选年份区间，Datepicker将只提供4位年份选项，彻底避免6位年份的选择。
• 格式强制：dateFormat: "mm/dd/yy"确保输出的日期中年份为4位（jQuery Datepicker中yy对应4位年份，y为2位）。
• 输入拦截：监听键盘事件，限制仅能输入数字和必要控制键，且年份部分长度达到4位后阻止继续输入。
• 失焦验证：在输入框失去焦点时检查年份格式，若不符合规则则重置并给出提示。

原生datetime-local输入框解决方案 #

若使用原生<input type="datetime-local">，可通过属性限制年份范围，配合JavaScript验证：

HTML 部分 #

<label for="date-start">Start Date</label>
<input type="datetime-local" id="date-start" min="1900-01-01T00:00" max="2100-12-31T23:59">
<label for="date-end">End Date</label>
<input type="datetime-local" id="date-end" min="1900-01-01T00:00" max="2100-12-31T23:59">

JavaScript 部分 #

// 获取当前年份
var yearNow = new Date().getFullYear();

// 初始化日期值
document.getElementById('date-start').value = `${yearNow}-01-01T00:00`;
document.getElementById('date-end').value = new Date().toISOString().slice(0, 16);

// 监听输入事件，验证年份格式
document.querySelectorAll('input[type="datetime-local"]').forEach(input => {
    input.addEventListener('input', function(e) {
        var value = e.target.value;
        var year = value.split('-')[0];
        if (year.length !== 4 || isNaN(year)) {
            e.target.value = '';
            alert('年份必须为4位有效数字');
        }
    });
});

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