maxlength 对 date 类型无效，因其值固定为 YYYY-MM-DD 格式（10字符），浏览器将其视为日期控件而非文本输入；应使用 min/max 属性或 JS 动态校验日期范围。
input[type="date"] 不支持 maxlength，写上也完全无效——浏览器会直接忽略该属性。
为什么 maxlength 对 date 类型不起作用
maxlength 是按“字符串字符数”限制的，而 type="date" 的值始终是固定格式的 YYYY-MM-DD（7 位 ASCII 字符），浏览器不把它当作文本输入处理。它底层绑定的是日期选择器控件，输入行为由系统 UI 控制，不是自由文本流。
常见错误现象：
给 <input type="date" maxlength="10"> 加了属性，但用户仍可正常打开日历、选任意日期，控制台也无报错——只是属性被静默丢弃。
- 所有现代浏览器（Chrome、Firefox、Safari、Edge）均不响应
maxlength在date上的设置 -
minlength同样无效，且没有意义：空值时它本就不参与校验，非空时值永远是 10 字符长 - 试图用 JS 修改
el.maxLength = 10也不会触发任何截断或约束逻辑
真正有效的日期长度/范围控制方式
日期输入的“长度”实质是有效日期范围问题，必须用语义化属性或 JS 计算：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 用
min和max属性限定可选日期区间，例如：<input type="date" min="2026-10-20" max="2026-11-03"> - 这两个属性值必须是
YYYY-MM-DD格式字符串，浏览器会禁用范围外的日期选项 - 若需动态计算（如“仅允许未来 14 天”），必须用 JS 生成
max值并写入 DOM，不能靠 HTML 静态写死 - 服务端仍需校验：用户可能绕过前端，直接 POST 一个非法日期字符串（如
"9999-99-99"）
如果非要“限制输入字符”，说明你用错了类型
当你发现需要对日期做“字符长度”控制时，大概率是需求理解偏差：
- 想防止用户手动输入乱码？→ 应禁用手动输入：
<input type="date" onkeydown="return false">，再配合min/max - 想限制用户填写的“年份跨度”？→ 这属于业务逻辑，应在提交前用 JS 校验
new Date(value)是否落在预期范围内 - 真要自由输入带分隔符的日期（如
2026/10/20）？→ 改用type="text"，再加maxlength="10"+pattern="\d{4}/\d{2}/\d{2}"，但失去原生日期选择器体验
最常被忽略的一点：日期控件的“长度”从来不是字符问题，而是数据有效性问题；强行套用文本类限制，只会掩盖真实约束意图。
