如何实现用户输入yyyy时自动为yyyy-mm-dd格式输入框追加-符号？

核心需求拆解 #

• 日期输入框强制遵循yyyy-mm-dd格式
• 用户输入4位年份（如2000）后，自动追加分隔符-
• 保留已有的Datepicker组件功能，选择日期后自动匹配目标格式

实现方案与代码示例 #

1. 输入框实时格式处理 #

通过监听输入框的input事件，过滤非法字符并自动补充分隔符，同时限制输入长度：

<input type="text" id="dateInput" placeholder="yyyy-mm-dd">

const dateInput = document.getElementById('dateInput');

dateInput.addEventListener('input', function(e) {
  // 仅保留数字和分隔符-，过滤其他非法字符
  let cleanValue = e.target.value.replace(/[^0-9-]/g, '');
  
  // 输入4位纯数字年份后自动追加-
  if (cleanValue.length === 4 && !cleanValue.includes('-')) {
    e.target.value = `${cleanValue}-`;
    return;
  }
  
  // 输入月份（年份后2位数字）自动追加-（可选优化）
  if (cleanValue.length === 7 && cleanValue.charAt(4) === '-' && !cleanValue.includes('-', 5)) {
    e.target.value = `${cleanValue}-`;
    return;
  }
  
  // 限制输入长度不超过yyyy-mm-dd的10位
  if (cleanValue.length > 10) {
    e.target.value = cleanValue.slice(0, 10);
  } else {
    e.target.value = cleanValue;
  }
});

2. 与Datepicker组件联动 #

以常见的jQuery UI Datepicker为例，配置格式并确保选择后自动填充正确格式：

$(function() {
  $('#dateInput').datepicker({
    // 设定Datepicker输出格式为yyyy-mm-dd
    dateFormat: 'yy-mm-dd',
    // 选择日期后直接填充到输入框
    onSelect: function(selectedDate) {
      $('#dateInput').val(selectedDate);
    }
  });
});

关键注意事项 #

• 格式校验：提交表单前建议通过正则/^\d{4}-\d{2}-\d{2}$/验证最终输入格式是否合法，避免用户手动修改导致格式错误
• 冲突规避：若Datepicker组件自带输入拦截逻辑，可将输入框设置为readonly，仅允许通过Datepicker选择或键盘按规则输入，防止逻辑冲突
• 用户体验：可添加输入提示（如placeholder），明确告知用户预期格式，减少误操作

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