用HTML代码快速实现日期范围选择控件-html教程-PHP中文网

flatpickr是解决原生date输入框无法选范围问题的最佳方案，它轻量（gzip后约12kb）、无依赖、支持ie11+，默认启用range模式，cdn一行引入即可实现“开始—结束”联动选择，避免双控件导致的校验缺失、视觉割裂和ios遮挡问题。

用html代码快速实现日期范围选择控件

原生 `<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 默认就是）。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

常见坑：中文 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 ");
```