HTML中有没有一种方法可以在日期输入中将年份限制为4位数字？

Question

我正在开发一个Django应用程序。
我的表单中有日期输入：

<input type="date" name="date_of_birth" max="03.11.2020" max-length="8" pattern="[0-3][0-9].[01][0-9].[0-9]{4}" class="dateinput form-control" required id="id_date_of_birth">

它允许输入6位数的年份，但我希望只能输入4位数。我还尝试编写了一个简单的脚本：

$(function() {
        $('#id_date_of_birth').change(function() {
            var date = $(this).val();
            console.log(date, 'change')
        });
    });

但仅当我更改年份时，它才会启动。
我想让数字循环在4个数字上，而不是6个。
有人可以给我一些提示如何将年份限制为仅4位数字吗？

- Sasandra30

---

请添加一个[mcve]（至少包含一次尝试，如“我尝试过max、max-length属性和pattern。”） - Andreas

max（和 min）的格式为 yyyy-mm-dd。 - Andreas

@Andreas 好的，是我错了。谢谢。 但是我仍然希望年份的数字向后移动4个位置，而不是6个位置。 - Sasandra30

如果类型为 datetime-local，则格式为 YYYY-MM-DDThh:mm。（例如：max="9999-12-31T23:59"） - Henry Kwon

Answer 1

我喜欢使用max属性的建议。只需在您的输入日期类型字段中设置max="9999-12-31"，年份部分将被限制为4位数字而不是8位。这解决了我的问题。

- William

---

正如下面的[https://dev59.com/8r7pa4cB1Zd3GeqPpgF0#rxbsnYgBc1ULPQZFnIlA]评论所述，即使使用max，它仍然允许年份超过4位数字。可以在同一帖子中发布的[https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_max_min_date](w3schools链接)中进行验证。 - Björn

Answer 2

在这种情况下，添加属性max可以解决问题。浏览器默认不会将年份字段限制为四位数字。

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

- Lundstromski

---

它仍然允许输入6位数字。我知道如果年份太长，后端会返回错误。但我希望前端也不可能这样做。 - Sasandra30

Answer 3

其他答案在某种意义上是正确的，即“max”属性将限制年份（至少在Chrome中），但日期格式不正确。

这是正确的日期格式。

<input type="datetime-local" max="9999-12-31T23:59" name="my-date"/>

- Manu Sisko