Question

我在使用HTML5日期输入时设置最小和最大YEAR时遇到一些问题。

这是我的代码：

<input required="required"  min="1900-01-01" max="2099-09-13" type="date" class="form-control" id="inputDataNascimento">

根本不起作用。

enter image description here

我做错了吗？这是一个错误吗？

注意：我正在使用Google Chrome和Twitter Bootstrap 3。

Answer 1

某些浏览器（如Safari和Internet Explorer）不支持此功能，这可能是您的问题。通过Javascript写入验证。

支持此功能的浏览器列表可在以下位置查看：

http://html5test.com/compare/browser/chrome-33/firefox-27/opera-19/safari-7.0/ie-11.html

Answer 2

日期输入类型的min和max属性几乎没有浏览器支持。您可以使用jQuery验证作为解决方法。

<input id="dateInput" required="required"  min="1900-01-01" max="2099-09-13" type="date" class="form-control" id="inputDataNascimento">
<script>
    $("#dateInput").validate();
</script>

Answer 3

HTML5 datepicker 组件现在可以在大多数浏览器中使用，并且完全实现了最小和最大控件属性。正确的格式是 yyyy-mm-dd，如 mozilla documentation 中所述。

<input type="date" id="birthday" name="birthday" min="2020-01-20" max="2021-01-28">

一个改编自 w3school 的简单例子：

<!DOCTYPE html>
<html>
<body>

<h1>Show a Date Control</h1>

  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday" min="2020-01-20" max="2021-01-28">

<p><strong>Note:</strong> type="date" is not supported in Safari or Internet Explorer 11 (or earlier).</p>

</body>
</html>

作为补充信息，来自 HTML5 规范文档。

在会话 4.10.5.1.7 Date state (type=date) 中，我们读到：

<块引用>

min 属性（如果指定）必须具有有效的值日期字符串。 max 属性（如果指定）必须具有一个值是一个有效的日期字符串。

在另一个会话 4.10.1.8 Date, time, and number formats 中，我们发现：

<块引用>

...旨在使计算机可读且一致，而不管用户的语言环境。例如，日期总是写在格式为“YYYY-MM-DD”，如“2003-02-01”。

HTML5上类型=日期的最小/最大属性

3 个答案: