用原生HTML+JavaScript实现日期联动校验：需用两个，通过监听input和blur事件动态设置对方的min/max属性（值为YYYY-MM-DD格式），空值时清空约束，并在Safari中手动触发input事件更新UI，后端必须二次校验。
怎么用原生 HTML + JavaScript 做前后日期输入框的联动校验
纯 HTML 的 <input type="date"> 本身不提供“起止日期互锁”能力，必须配合 JavaScript 监听和校验。关键不是写得多，而是把 min 和 max 属性动态设对，并在用户手动改值、粘贴、清空等边界场景下及时响应。
为什么 change 事件不够用？得监听哪些事件
change 只在失焦后触发，用户改完“开始日期”立刻点“结束日期”输入框时，后者还没收到更新，就可能输一个更早的日期。实际要监听：
-
input：覆盖键盘输入、粘贴、清除（包括清空后留空）、日历面板选择 -
blur：兜底处理失焦时的最终状态（比如手动删光再离开） - 可选
focus：用于首次聚焦时同步min/max，避免用户看到无效可选范围
如何动态设置 min 和 max 属性
不能只设一次。每次任一输入框变化，都要重新计算并写入另一个框的约束属性。注意：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
min和max的值必须是YYYY-MM-DD格式字符串，不能是 Date 对象或时间戳 - 如果某框为空，对应约束应清空（设为
""），否则会意外限制合法输入 - 设置前先检查值是否为有效日期字符串（可用
!isNaN(new Date(val).getTime())粗略判断）
const start = document.getElementById('start');
const end = document.getElementById('end');
function updateConstraints() {
const startVal = start.value;
const endVal = end.value;
if (startVal) {
end.min = startVal; // 结束日期不能早于开始
} else {
end.min = ''; // 清空约束
}
if (endVal) {
start.max = endVal; // 开始日期不能晚于结束
} else {
start.max = '';
}
}
用户清空、粘贴非法格式、手动输入乱码怎么办
浏览器对 type="date" 的输入有基本过滤，但粘贴如 "2024/01/01" 或 "2024-1-1" 会导致 value 为空字符串，而界面仍显示乱码。此时 input 事件仍会触发，但 element.value 是空 —— 这正是校验时机：
立即学习“前端免费学习笔记（深入）”；
- 每次
input后立即调用updateConstraints() - 若发现
value为空但输入框视觉上有内容（比如显示2024/01/01），说明输入非法，可主动element.value = ''强制清空并触发下一轮校验 - 不要依赖
invalid事件：它只在表单提交时批量触发，无法实时反馈
最常被忽略的一点：iOS Safari 对 min/max 的支持有延迟，设完后最好加一行 element.dispatchEvent(new Event('input', { bubbles: true })) 触发重绘。
