需用两个原生date输入框实现范围选择，通过动态设置min属性及change事件监听确保结束日期不早于开始日期，起始框min设为空或当前日期，结束框min动态同步起始值，并在结束框变更时校验是否小于起始值。
用原生 <input type="date"> 实现双控件范围选择，但要注意值校验
HTML 本身没有 type="daterange"，所以得用两个 <input type="date"> 分别控制起止日期。浏览器会自动渲染为原生日期选择器（iOS、Chrome、Edge 均支持），无需引入第三方库。
关键不是“怎么显示”，而是“怎么保证结束日期不早于开始日期”。原生控件不会自动联动，必须手动绑定逻辑：
- 给起始
<input>添加min属性时，值应为空或设为当前日期；设置后，用户无法选更早的日期 - 给结束
<input>添加min属性，其值需动态设为起始输入框的value；否则可能出现2024-05-10到2024-05-01这种无效范围 - 监听起始输入框的
change事件，更新结束框的min；同时监听结束框的change，反向检查是否小于起始值，若小于则重置或报错
示例片段：
<input type="date" id="start">
<input type="date" id="end">
<script>
const start = document.getElementById('start');
const end = document.getElementById('end');
start.addEventListener('change', () => {
end.min = start.value || '';
});
end.addEventListener('change', () => {
if (end.value && start.value && end.value < start.value) {
alert('结束日期不能早于开始日期');
end.value = '';
}
});
</script>
为什么不用 <input type="date"> 的 min/max 直接限制范围？
min 和 max 是单向约束，只能限制某一个输入框的可选区间，不能表达“两个值之间的相对关系”。比如你设 start.min="2024-01-01"、end.max="2024-12-31"，用户仍可能选 start=2024-12-01、end=2024-01-01 —— 这在业务上是非法的。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
真正有效的范围控制必须基于两个值的实时比对，也就是“值依赖”。这只能靠 JS 实现，HTML 属性做不到。
-
min/max适合固定边界（如“只能选今年之后的日期”） - 范围校验适合动态边界（如“结束必须 ≥ 开始”），必须 JS 补位
- 部分旧版 Safari（≤ iOS 15.5）对
min动态更新支持不稳定，需加end.dispatchEvent(new Event('input'))触发 UI 刷新
遇到 Invalid Date 或空字符串怎么办？
用户未选择时，<input type="date"> 的 value 是空字符串 ''，不是 null 或 undefined。直接拿它去比较（比如 end.value ）会返回 <code>false，但隐式转换可能导致意外行为（如 '' 为 <code>true）。
- 始终先判断
value是否非空：if (!start.value || !end.value) return; - 比较前确保格式合法：原生
type="date"输出格式恒为YYYY-MM-DD，可直接字符串比较（因为字典序与时间序一致），无需转Date对象 - 如果从后端取值初始化，注意 ISO 格式必须带补零（
"2024-5-1"会被视为无效，浏览器清空输入框）
移动端兼容性差？其实只是没设对 inputmode 和 autocomplete
在 iOS Safari 上，原生日期控件有时不弹出、或弹出数字键盘，根本原因是浏览器误判了输入意图。这不是 bug，而是缺少语义提示。
- 加上
inputmode="numeric"没用，反而干扰；正确做法是显式声明inputmode="none"并配合readonly（但 readonly 会禁用原生 picker）—— 所以不推荐 - 真正有效的是：确保
type="date"存在，且不覆盖inputmode；同时添加autocomplete="bday"（虽语义不符，但 Safari 识别这个值会优先触发日期面板） - 避免在父容器上设
touch-action: manipulation或-webkit-user-select: none，这些 CSS 会拦截点击事件，导致 picker 不触发
如果项目必须支持 Android 4.x 或老版 UC，那确实得降级用 JS 库（如 flatpickr），但 2024 年绝大多数场景，原生方案已足够稳定。
最常被忽略的一点：日期范围选择从来不是“选两个日期”这么简单，而是“定义一段连续时间区间”。这意味着你后续做查询、计算天数、生成日历高亮时，所有逻辑都依赖这两个值的严格有序性 —— 校验必须在提交前完成，不能只靠后端兜底。
