'How to set the min/max attribute on input type=date

I'm having some problems to set a minimum and a maximum YEAR with HTML5 date input.

Here is my code:

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

It doesn't work at all.

enter image description here

Am I doing something wrong? Is this a bug?

Notes: I'm using Google Chrome and Twitter Bootstrap 3.

htmldatemaxminhtml-input


Solution 1:[1]

min and max attributes for date input type have very little browser support. You can use jQuery validation as a workaround.

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

Solution 2:[2]

Some browsers like Safari and Internet Explorer do not support this functionality; this may be your problem. Write validation via JavaScript.

The list of browsers that support this feature can be seen at:

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

Solution 3:[3]

The HTML datepicker component now works in most browsers and the minimum and maximum control attributes are fully implemented. The correct format is yyyy-mm-dd, as described at MDN.

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

A simple example adapted from 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>

As supplementary information, from the HTML5 specification documentation.

In session 4.10.5.1.7 Date state (type=date), we read:

The min attribute, if specified, must have a value that is a valid date string. The max attribute, if specified, must have a value that is a valid date string.

And in the other session, 4.10.1.8 Date, time, and number formats, we find:

...is intended to be computer-readable and consistent irrespective of the user's locale. Dates, for instance, are always written in the format "YYYY-MM-DD", as in "2003-02-01".

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 nekiala
Solution 2 TylerH
Solution 3 TylerH

Related Questions