原生 date input 无法实现单双日过滤，必须用 JavaScript 结合 input 和 change 事件校验并修正，注意跨浏览器兼容性及后端二次验证。
date input 的原生限制能力很弱，min/max 和 step 都不支持单双日过滤
HTML 原生的 <input type="date"> 不支持按“日期为奇数”这种逻辑做限制。step 只对时间单位有效（如 step="7" 表示隔周），对“1号、3号、5号…”这类非等距间隔无意义；min/max 也只能框定范围，无法筛除偶数日。
所以必须靠 JavaScript 拦截 + 校验，且要覆盖用户所有可能的输入路径：手动输入、日历面板选择、粘贴、键盘修改等。
用 input 和 change 事件监听并强制修正
仅监听 change 不够——用户在输入框里敲 2024-05-02 后还没失焦，错误值已存在；但过度监听 input 又容易干扰正常编辑（比如删日期时频繁触发）。稳妥做法是两者结合，并加防抖或条件判断：
-
input事件中只做轻量检查（如格式是否合法），不立即改值 -
change事件中解析日期，判断getDate()是否为偶数，是则自动修正为最近的单数日（向前取，避免跳到下月） - 修正后调用
setSelectionRange()把光标放回末尾，减少操作中断感
const dateInput = document.querySelector('input[type="date"]');
dateInput.addEventListener('change', () => {
const d = new Date(dateInput.value);
if (isNaN(d.getTime())) return;
const day = d.getDate();
if (day % 2 === 0) {
d.setDate(day - 1); // 总往前调1天（2→1，30→29，不会跨月）
dateInput.value = d.toISOString().slice(0, 10);
dateInput.setSelectionRange(10, 10); // 光标置末尾
}
});注意 new Date(string) 在不同浏览器对格式的容忍度差异
new Date("2024-05-02") 在 Chrome/Firefox 中能正确解析，但在 Safari 旧版本中可能返回 Invalid Date，因为其只严格接受 YYYY-MM-DDTHH:mm:ss.sssZ 格式。安全做法是手动拆解字符串：
立即学习“前端免费学习笔记（深入）”；
- 用
dateInput.value.match(/^(\d{4})-(\d{2})-(\d{2})$/)提取年月日 - 构造
new Date(year, month - 1, day)（注意月份从 0 开始） - 再调用
getDate()获取标准化后的日期数（避免 2 月 30 日被自动转成 3 月 2 日这类隐式修正）
否则用户输 2024-02-30，某些浏览器会转成 2024-03-01，而 1 是单数——看起来“通过”了，实际完全偏离预期。
表单提交前必须二次校验，不能只信前端控制
JavaScript 可被禁用或绕过，任何客户端限制都只是体验优化。后端收到 date 字段后，仍需解析并检查 day % 2 === 1，否则恶意请求可直接 POST 2024-05-04 绕过所有前端逻辑。
另外，如果该日期字段参与计算（比如生成报表周期），务必确认业务是否真的需要“强制单数日”——有些场景（如合同生效日）更应由人工确认，而非用技术手段削足适履。
