HTML原生date输入框不支持范围筛选，需用两个date框配合JavaScript联动校验：start变化时设end.min，end变化时设start.max，提交前检查日期顺序；推荐type="date"而非datetime-local，多条件时命名用date_from/date_to并统一YYYY-MM-DD字符串传输。
HTML原生不支持范围筛选
浏览器原生的 只能选单个日期，没有内置“开始/结束”联动或范围高亮能力。强行用两个独立 date 输入框，用户可能填反顺序、留空一个、或输入无效区间（比如开始晚于结束），而 HTML5 的 min/max 属性只能做静态限制，无法动态响应另一个字段的变化。
用两个 date 输入框 + JavaScript 校验联动
这是最轻量、兼容性最好（IE11+）的方案，核心是监听 change 事件并实时同步约束：
- 给开始日期输入框设
id="start-date"，结束日期设id="end-date" - 当
start-date改变时，把它的值赋给end-date的min属性 - 当
end-date改变时，把它的值赋给start-date的max属性 - 提交前检查
start-date.value ，否则阻止提交并提示
示例关键逻辑：
const start = document.getElementById('start-date');
const end = document.getElementById('end-date');
start.addEventListener('change', () => {
end.min = start.value;
});
end.addEventListener('change', () => {
start.max = end.value;
});
// 表单提交时校验
form.addEventListener('submit', (e) => {
if (start.value && end.value && new Date(start.value) > new Date(end.value)) {
e.preventDefault();
alert('开始日期不能晚于结束日期');
}
});
为什么不用 input type="datetime-local"？
它支持时分秒，但问题更严重：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 移动端键盘弹出的是完整 datetime 键盘，体验笨重，用户常只关心日期
-
min/max必须传带时间的 ISO 字符串（如"2024-01-01T00:00"），容易因时区或格式错误导致约束失效 - 部分旧版 Safari 对
datetime-local的min/max支持不一致，会出现允许选择超限值的情况
除非业务明确需要精确到小时，否则坚持用 type="date" 更稳妥。
多条件组合时注意日期字段的命名和后端约定
如果筛选还包含状态、分类等其他条件，前端传参必须让后端无歧义地识别日期范围：
- 避免用
start/end这类泛名，推荐date_from/date_to或created_after/created_before - 确保前后端对“结束日期是否包含当天”达成一致（常见做法是后端按
处理，即左闭右开） - 空值处理要明确：两个都空表示不限；仅一个为空，应忽略该侧约束（不要传
null或空字符串给后端日期字段）
真实项目里，最容易被忽略的是时区——用户在东京选的 2024-05-01，JavaScript 默认转成 UTC 时间再发请求，后端若按本地时区解析，可能变成 4 月 30 日。解决方案不是加时区转换库，而是统一约定：所有日期参数以 YYYY-MM-DD 字符串形式传输，后端按东八区或数据库时区解释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
