应使用两个原生配合JS动态同步min/max，因HTML不支持type="daterange"且原生方案更轻量可靠；min/max仅设静态边界，无法约束范围逻辑，须用JS实时比较value字符串并处理空值、Safari刷新等问题。
直接用两个 <input type="date">，配 JS 动态同步 min/max，别碰 type="daterange"（HTML 根本不支持）、也别一上来就引入 Flatpickr —— 仪表盘对加载速度和语义清晰度敏感，原生方案最稳。
为什么不能只靠 min 和 max 属性
min 和 max 是单输入框的静态边界，比如设 start.min="2026-10-01"、end.max="2026-12-31"，用户仍可选 start="2026-12-15" + end="2026-10-20"，业务上完全非法。范围逻辑本质是“值依赖”，必须靠 JS 实时比对两个 value 字符串（ISO 格式可直接字典序比较）。
-
start.value和end.value都是字符串，且格式固定为"YYYY-MM-DD"，直接用或 <code>>比较合法 - 空值时
value是""（不是null或undefined），判断前必须显式检查 - 旧版 Safari（≤ iOS 15.5）动态改
min后 UI 不刷新，需手动触发end.dispatchEvent(new Event('input'))
怎么让两个 <input type="date"> 在仪表盘里不突兀
仪表盘常嵌在卡片或 flex 容器中，原生日期控件默认宽度窄、边距不一致，容易挤压布局或文字截断。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给每个
input加内联样式：style="width: 120px; box-sizing: border-box;"——120px是实测能完整显示"2026-10-27"的最小宽度 - 避免用
min-width，某些浏览器仍会收缩；box-sizing: border-box确保padding不撑宽 - 如果仪表盘用了 CSS Grid/Flex，给父容器加
align-items: center防止输入框上下错位 - 不要依赖
placeholder（type="date"不支持），用label或旁注文字说明“起始”“截止”
后端校验为什么不可省略
前端 JS 只控制 UI 行为，但用户可绕过：禁用 JS、手动修改 DOM、用 curl 提交非法值。所有日期范围参数都必须在后端二次校验。
立即学习“前端免费学习笔记（深入）”；
- 检查
start_date和end_date是否符合/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/正则 - 转成日期对象后比对大小，防止字符串伪造（如
"2026-02-30"虽匹配正则但非法） - 业务上还需检查范围跨度，比如仪表盘通常不允许超过 90 天，避免查询超时
- 返回错误时明确提示字段，例如
{"error": "end_date must be >= start_date"}，前端可精准标红对应输入框
真正麻烦的不是写那几行 JS 监听，而是记住：用户没点日历、直接手输、粘贴乱码、清空再填——这些路径都要覆盖；min 动态更新后 Safari 的 UI 刷新、表格中多个日期控件的批量初始化、服务端解析时区偏移……细节堆起来，才叫仪表盘级的健壮。
