'HTML5 date picker doesn't show on 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!

htmlsafari


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

Taken from http://www.javascriptkit.com/javatutors/createelementcheck2.shtml

With jQuery and jQuery UI you can create a crossbrowser datepicker that only pops up when the browser doesn't support it natively. If you already have jQuery in your project, simply do:

var dateClass='.datechk';
$(document).ready(function ()
{
  if (document.querySelector(dateClass).type !== 'date')
  {
    var oCSS = document.createElement('link');
    oCSS.type='text/css'; oCSS.rel='stylesheet';
    oCSS.href='//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css';
    oCSS.onload=function()
    {
      var oJS = document.createElement('script');
      oJS.type='text/javascript';
      oJS.src='//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js';
      oJS.onload=function()
      {
        $(dateClass).datepicker();
      }
      document.body.appendChild(oJS);
    }
    document.body.appendChild(oCSS);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="datechk" class="datechk">

Solution 4:[4]

2021/04/29 update: support has been added to Safari 14.1 \o/

https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/



Old answer:

Safari 15 (not yet released as of 2021/02/22) will provide a native date picker:

"Starting with Safari TP [TP = Technology Preview] 115, released on Oct 22, 2020, UIs for date, datetime-local and time are supported on macOS and iOS. The month input type is unsupported on macOS, but works on iOS. The week input type is unsupported on macOS and iOS."

Screenshots:

Solution 5:[5]

You can use a regex pattern to validate the format in the placeholder like in the example above. The one here is a good starting point but you may want to create your own.

Try the code below in Safari without adding a valid formatted value like a string of text.

Incorrect format shows a validation error, correct format (dd/mm/yyyy or dd-mm-yyyy) will submit the form, and it disappears.

<form>
<input type="date" placeholder="dd/mm/yyyy" pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" required>
<button type="submit">Check if value is valid</button>
</form>

Solution 6:[6]

For those who using WordPress, there's a quick fix using this plugin date and time picker

You'll just need to pass the CSS selector in plugin settings, or just pass input[type=date]

Solution 7:[7]

I used the suggestion given by @drjorgepolanco with a bit of modification:

function displayDatePickerIfBrowserDoesNotSupportDateType() {
  var datePicker = document.querySelector('.date-pick');
  if (datePicker && datePicker.type !== 'date') {
    $('.date-pick').datepicker();
  }
}

$(document).ready(function($) {
  displayDatePickerIfBrowserDoesNotSupportDateType();
});
<html lang="en">

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <input type="date" class="date-pick">
</body>

</html>

Solution 8:[8]

I landed in this question because my <input id="dateId" type="date"> in iOS (mobile Safari) was giving a wrong string format. It was a different format than Chrome browsers:

  1. Chrome: document.getElementById('dateId').value // "2022-04-22"
  2. Safari: document.getElementById('dateId').value // "22 abr. 2022"

I believe that as previous answers state the input is fallbacking to input text or something. So I used:

<input id="dateId" type="date" placeholder="yyyy-mm-dd" pattern="\d{4}-\d{2}-\d{2}">

Checkout this MDN reference.

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 Chuck Le Butt
Solution 2 Finlay Percy
Solution 3 Aaron Mason
Solution 4
Solution 5
Solution 6 Mostafa Esmaeili
Solution 7
Solution 8

Related Questions