how can I set a max value on my html5 date input so that it could be recognized by safari for iOS?

Question

The title is pretty clear I guess?

Here's my date input :

<input type="date" id="birthdate" name="birthdate" value="" max="1993-12-07" required/>

In chrome, I cannot enter a date superior to 1993-12-07 using the little arrows of the field (but if I write the date myself I can).

In safari for iOS, focusing that field just brings a nice datepicker. However, this datepicker is NOT limited to the "max" attribute. So how can I do that? Of course, I have a server-side form validation but I want to make it on client-side too. Any idea? Thanks!

score 8 · Accepted Answer · edited May 23 '17 at 10:32

8

Safari does not yet support it yet . Only Opera and chrome support it as of Nov 2011. Anyways here is the w3spec on it http://www.w3.org/TR/html-markup/input.date.html#input.date.attrs.max

You can use js validation on submit or on change. Use a js validation framework of your choice

Here is pure js example http://www.roseindia.net/answers/viewqa/Ajax/4734-start-date-and-end-date-validation-in-javascript.html. Use your max date instead of end date

For jquery solution look at this Validate that end date is greater than start date with jQuery

edited May 23 '17 at 10:32

Community

1
1

answered Dec 07 '11 at 17:30

aWebDeveloper

36,687
39
170
242

1

Now, at October 2014 - mobile Safari support max and min at date? – Vitaly Zdanevich Oct 27 '14 at 15:45
@VitalyZdanevich any link to support – aWebDeveloper Oct 27 '14 at 17:53
I don't know any link - it is was question. – Vitaly Zdanevich Oct 28 '14 at 14:17
1

Even in November 2016, mobile Safari does not support max and min attributes of date. – Terbiy Nov 02 '16 at 07:35
2

Even in January 2020, mobile Safari still does not support max and min attributes of date (iOS 13.0) – neiya Jan 28 '20 at 10:02

score 0 · Answer 2 · edited Aug 08 '16 at 07:36

0

Found the Solution for dynamically disabling future dates:

@{ string datestring = DateTime.Now.ToString("yyyy-MM-dd"); }
<input type="date" 
       required="required" 
       name="AttendanceDate" 
       max="@datestring" 
       class="form-control" />

edited Aug 08 '16 at 07:36

Nikolay Mihaylov

3,868
8
27
32

answered Aug 08 '16 at 06:44

Luqman Cheema

409
6
5

This works fine on Android, but on iOS the min and max properties aren't taken in account – FIZLIN Jan 15 '18 at 12:21

how can I set a max value on my html5 date input so that it could be recognized by safari for iOS?

2 Answers2

Linked