如何用HTML+JS实现日期输入自动添加分隔符替代原生日期选择框？

HTML结构 #

用type="tel"的输入框比number更合适——number类型自带上下箭头且无法兼容格式化后的非数字字符（斜杠），tel类型既限制仅输入数字，又支持文本格式化：

<input type="tel" id="dateInput" placeholder="dd/mm/yyyy" maxlength="10">

JavaScript逻辑 #

监听输入框的input事件，实时过滤非数字字符、自动添加斜杠，同时处理光标位置保证输入流畅：

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

dateInput.addEventListener('input', function(e) {
  // 保存当前光标位置
  const cursorPos = e.target.selectionStart;
  // 过滤所有非数字字符
  const rawNum = e.target.value.replace(/\D/g, '');
  let formattedStr = '';

  // 按规则拼接格式化字符串
  if (rawNum.length > 0) {
    // 拼接日部分
    formattedStr += rawNum.slice(0, 2);
    // 输入超过2位时，添加斜杠和月部分
    if (rawNum.length >= 3) {
      formattedStr += '/' + rawNum.slice(2, 4);
      // 输入超过4位时，添加斜杠和年部分
      if (rawNum.length >= 5) {
        formattedStr += '/' + rawNum.slice(4, 8);
      }
    }
  }

  // 调整光标位置：避免自动添加斜杠后光标错位
  let newCursorPos = cursorPos;
  if (cursorPos === 2 && rawNum.length >= 2) {
    newCursorPos += 1;
  } else if (cursorPos === 5 && rawNum.length >= 4) {
    newCursorPos += 1;
  }

  // 更新输入框值并恢复光标位置
  e.target.value = formattedStr;
  e.target.setSelectionRange(newCursorPos, newCursorPos);
});

关键逻辑说明 #

• 输入过滤：用正则/\D/g移除所有非数字字符，确保输入仅保留日期数字。
• 自动格式化：输入满2位（日）后自动加/，满4位（日+月）后再自动加/，最终生成dd/mm/yyyy格式。
• 光标适配：当输入到斜杠添加位置时，自动将光标移到斜杠后，无需用户手动跳转。
• 长度限制：通过maxlength="10"限制总输入长度（8位数字+2个斜杠），防止无效输入。

可选优化：日期合法性验证 #

如果需要确保输入的日期有效，可添加验证逻辑：

// 验证日期是否合法
function isValidDate(day, month, year) {
  const testDate = new Date(year, month - 1, day);
  return testDate.getFullYear() === year && testDate.getMonth() === month - 1 && testDate.getDate() === day;
}

// 在input事件中调用验证
if (formattedStr.length === 10) {
  const [day, month, year] = formattedStr.split('/').map(Number);
  dateInput.setCustomValidity(isValidDate(day, month, year) ? '' : '请输入有效日期');
} else {
  dateInput.setCustomValidity('');
}

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