原生不支持区间选择，仅能选单个日期；需用两个控件配合min/max属性及js动态更新实现基础范围约束，高亮区间须依赖flatpickr等第三方库或自建组件。
HTML 原生 <input type="date"> 不支持区间选择
浏览器原生的 <input type="date"> 只能选单个日期，没有“开始日期 + 结束日期”联动逻辑，也没有内置日历区间高亮。强行用两个 <input type="date"> 并不能自动限制范围、校验顺序或视觉标记区间——这些都得自己补。
用两个 <input type="date"> 实现基础区间选择（无 JS 也行）
最轻量的做法是放两个原生控件，靠属性约束基本行为：
-
min和max属性可限制可选范围（比如禁止选未来日期） - 给结束日期输入框加
min属性，值设为开始日期的value（需 JS 动态更新） - 表单提交前手动检查
start ，否则 <code>setCustomValidity()报错
示例关键片段：
<input type="date" id="start"><input type="date" id="end" min="">
JS 初始化时记得同步：endInput.min = startInput.value；监听 start 的 change 事件去更新 end.min。
真正要“日历区间高亮”，必须用第三方库或自建日历组件
原生控件无法渲染带选中区间的日历视图。常见方案有：
-
flatpickr：轻量、无依赖、支持mode: "range"，直接高亮区间，还能禁用范围外日期 -
dayjs + 一个日历 UI 库（如 react-datepicker）：适合 React/Vue 项目，但注意时区和格式化陷阱 - 手写：用
new Date()算出当月第一天/最后一天，生成日期数组，再用 CSS 标记start ≤ date ≤ end—— 仅推荐练手，维护成本高
flatpickr 示例初始化：
flatpickr("#dateRange", {
mode: "range",
dateFormat: "Y-m-d",
minDate: "today"
});
容易被忽略的兼容性与体验细节
移动端 Safari 对 type="date" 支持不一致，iOS 15+ 才较好支持 min/max；Android 各厂商定制键盘差异大，可能不显示确认按钮。如果产品必须覆盖老 iOS 或需要精确控制样式/交互，原生控件就不可靠。
另外，“区间”在语义上隐含顺序要求，但用户可能先填结束日期——这时 start.min 还没设，得双向绑定 + 防抖更新，否则出现 Invalid Date 或空白 min 属性导致整个日期控件失效。
