flatpickr是解决原生date输入框无法选范围问题的最佳方案，它轻量（gzip后约12KB）、无依赖、支持IE11+，默认启用range模式，CDN一行引入即可实现“开始—结束”联动选择，避免双控件导致的校验缺失、视觉割裂和iOS遮挡问题。
原生 <input type="date"> 无法选范围，别硬套
浏览器原生的 <input type="date"> 只支持单日期，没有“开始—结束”联动逻辑。强行用两个独立控件会丢掉范围校验、视觉连贯性和移动端体验——比如 iOS 上两个日期选择器弹出时互相遮挡，用户选完起始日再点结束日，起始日输入框可能自动失焦。
真正能快速落地的方案，是用一个轻量级第三方库补足原生缺失的能力，而不是自己监听 change 事件手写校验和禁用逻辑（容易漏掉键盘输入、粘贴、清空等边界情况）。
推荐用 flatpickr，CDN 一行引入即用
flatpickr 是目前最轻、兼容性最好、移动端适配最稳的日期范围选择器。gzip 后仅 ~12KB，无依赖，支持 IE11+，且默认启用范围模式。
- 直接通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script><br><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
- HTML 结构只需一个
<input>：<input id="dateRange" placeholder="Select date range">
- 初始化时启用
mode: "range"：flatpickr("#dateRange", {<br> mode: "range",<br> dateFormat: "Y-m-d",<br> minDate: "today"<br>});
注意：不要用 type="date"，否则某些浏览器会叠加原生控件，造成样式冲突或双触发；保持 type="text"（flatpickr 默认就是）。
立即学习“前端免费学习笔记（深入）”；
常见坑：中文 locale 下「今天」按钮失效、年份滚动错乱
如果用了中文语言包（lang: "zh"），必须同步引入对应 locale 文件，否则 today 按钮不响应，年份选择器可能显示 NaN 或跳转异常。
- CDN 加载中文 locale：
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/l10n/zh.js"></script>
- 初始化时显式指定：
flatpickr("#dateRange", {<br> mode: "range",<br> locale: "zh",<br> dateFormat: "Y-m-d"<br>}); - 避免混用
locale和lang：v4.x 只认locale字符串，lang是旧版写法，已失效
另外，minDate / maxDate 接收字符串（如 "2024-01-01"）或 Date 对象，但不能传 new Date() 的毫秒数——会解析失败。
提交时后端拿不到值？检查 name 属性和表单序列化方式
flatpickr 不改变原始 <input> 的 DOM 结构，它只是绑定事件并格式化显示，所以表单提交时，值仍走原生流程。但要注意：
- 务必给
<input>设置name属性，否则FormData或传统 form 提交时字段丢失 - 值格式由
dateFormat决定，默认是"Y-m-d"，范围值会以英文短横线连接，如"2024-05-01 to 2024-05-10"—— 后端需按此格式解析，不能当单个 ISO 日期处理 - 如果要用更明确的字段名（如
start_date和end_date），得手动拆分：const [start, end] = document.getElementById("dateRange").value.split(" to ");
移动端真机测试别跳过：iOS Safari 对 input 的 focus 行为有特殊限制，flatpickr 的 inline: false（默认）在部分微信内嵌 WebView 中可能不弹出，此时加 clickOpens: true 更稳妥。
