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

Asked 6/3, 2014 at 18:13 Answered 29/1, 2021 at 19:57

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.

Unicorn answered 6/3, 2014 at 18:13 Comment(4)

a min or max would need to be a number, it is a string currently. – Haeres 6/3, 2014 at 18:14

even for the "date" type? i've seen some examples around using this format... – Unicorn 6/3, 2014 at 18:25

looks like I am wrong, the date format is part of spec sorry. html 5 form input Though as other have commented , your mileage may vary. – Haeres 6/3, 2014 at 18:32

Which browser are you using for your tests? I have heard there is very little support for min and max attributes for date input type. Try with Chrome. It is not min or max attributes that limit the day and month. It seems min and max are not working at all. – Leftwich 6/3, 2014 at 18:33

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

Latrice answered 6/3, 2014 at 18:25 Comment(2)

I'm using Chrome :/ . Date is working. 'min' and 'max' are not. :( – Unicorn 6/3, 2014 at 18:26

Are you using Jquery? There are some nice widgets there some nice date functions. query ui – Haeres 6/3, 2014 at 18:42

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>

Leftwich answered 6/3, 2014 at 18:39 Comment(0)

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".

Pamalapamela answered 29/1, 2021 at 19:57 Comment(3)

Sadly, the minimum and maximum controls still don't work for Safari on iOS. – Militarize 9/4, 2021 at 10:19

"Fully implemented" is in the eye of the beholder. In Chrome, at least, the min and max apply to the date picker associated with the input, but not with changes typed into the input box. (As of Version 93) – Swindell 7/9, 2021 at 21:52

stevec's comment still applies in late 2024 for Firefox 128.2.0 for OpenSuse 15.5, despite the Mozilla documentation. – Commute 26/9 at 15:16

Recommended topics

Hot tags