Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 date picker doesn't show on Safari

Tags:

html

safari

Having previously used jQuery date picker, I have now converted some of the date fields in forms on my website to the HTML5 date picker.

On the documentation, it says Safari is supported: however, it currently shows just a text field (whereas Chrome and other browsers show the date picker correctly).

echo "<input type='date' name='Date' min='$todaymin'>"; 

(the same applied without the min attribute)

This is my code line - am I doing something wrong or am I just reading the documentation wrong and it is NOT supported in Safari?

Thank you!

like image 851
Will WP Avatar asked Feb 28 '16 11:02

Will WP


People also ask

Does Safari have a date picker?

Safari does not support the HTML5 date and time input types: https://caniuse.com/#feat=input-datetime. So the required input format that the user needs to fill in is not clear in Safari.

Why Datepicker is not working in HTML?

You need to include jQuery, and include it before jQuery UI. You also need to move your code to the end of your document or wrap it in a document ready call. Include a reference to jQuery before jQuery UI. Thanks for the response .

How do I display a date picker in HTML?

The <input type="date"> defines a date picker. The resulting value includes the year, month, and day.


2 Answers

Safari does not include a native datepicker for its desktop version (although it does for iOS). Incidentally, neither does IE. It's very frustrating as it could save developers a lot of time if they did.

This is a useful link for tracking support for it: http://caniuse.com/#feat=input-datetime

like image 74
kevin Avatar answered Sep 20 '22 08:09

kevin


Although there is no native datepicker for Safari (or IE) a pretty good workaround is to add a placeholder attribute to the date input. This informs Safari and IE users which format the fallback text input should be (which is yyyy-mm-dd).

The placeholder doesn't display on browsers that support type="date" so this workaround won't affect other browsers.

e.g. <input type="date" placeholder="yyyy-mm-dd" />

like image 43
Finlay Percy Avatar answered Sep 19 '22 08:09

Finlay Percy