HTML5 日期输入 6 位数年份

Posted 2023-02-25

【中文标题】HTML5 日期输入 6 位数年份

【英文标题】：HTML5 Date Input 6 digit year

【发布时间】：2014-08-27 12:59:55

【问题描述】：

我的表单上有一个标准的<input /> 控件，用type="date" 装饰

渲染时，它会显示正确的水印yyyy-mm-dd，并且您可以选择正确的日期。 但是，当您尝试输入一个值时，年份会扩展到 6 位数字，而不是 4 位。我添加了屏幕截图来帮助演示我遇到的问题。

还有其他人得到这个吗？我使用 Chrome（版本 35.0.1916.153 m）作为我的默认浏览器。 我想要一种不涉及额外 JS 的强制 4 年输入的方法。

【参考方案1】：

使用max 属性来解决这个问题，例如：-

<input type="date" max="1979-12-31">

【讨论】：

虽然caniuse.com/input-datetime 现在无法在 Safari 中使用

【参考方案2】：

有点老了，但为了后代……

使用max 属性可以消除这个问题。

<input type="date" max="2999-12-31">

笔：https://codepen.io/iHearRobots/pen/OQVzLZ

【讨论】：

我不同意这“消除”了问题。例如，从 Chrome 70 开始，我可以输入 6 位数的年份。 IMO，它应该阻止我输入超过最大年份的位数。它可能会被“验证”为不正确，但验证仍然不是标准的。

这似乎只在用户使用向上和向下的小切换按钮时才有效（至少在 Chrome 中）。但它不会阻止输入范围之外的数据。

虽然caniuse.com/input-datetime 现在无法在 Safari 中使用

【参考方案3】：

据我所知，max 属性正在工作......

max 的格式很棘手，如果你输入正确的格式，一切都会好起来的......

例如看这里：

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_max_min_date

【讨论】：

被选为正确答案，因为它是非 JS 修复。

它仍然允许输入 6 位数的年份而不是 4

请注意，使用type="datetime-local" 时，您需要使用yyyy-mm-ddT00:00 之类的最大格式才能正常工作。

不幸的是，这只影响浏览器验证器。仍然可以输入 6 个（或 Firefox 上为 5 个）数字。

正如@Tristan 所说，它适用于 Chrome 和 Edge，但不适用于 Firefox。有没有通用的解决方案？

【参考方案4】：

它可以让你输入更大的年份。它没有设计有上限，因此允许超过 9999 年。不知道为什么。 （注意，即使使用max 属性，它似乎也没有限制它。[编辑] .. 它可能不允许用户在输入更大的数字后实际提交。）

如果您想完全限制它，您将需要使用 javascript 解决方案。

See this previous thread

【讨论】：

愚蠢，因为掩码显示的是 4 位数年份。所以这发生在每个人身上？

@SemiDemented - 是的，至少对于 webkit 浏览器来说是的！！