95

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!

Will WP
  • 1,225
  • 1
  • 9
  • 19
  • 1
    Maybe the datepicker isn't directly the issue? Have you checked the Safari console for errors by any chance? – SidOfc Feb 28 '16 at 11:53
  • 1
    @SidneyLiebrand good call - I did check the console and there was an error (given by the jQuery picker). I removed the references, and the error message is gone, but the date picker still doesn't work. – Will WP Feb 28 '16 at 12:19
  • 1
    Does anyone know if Big Sur update will support it. Safari will get webP support so now if it gets date picker support then it may no longer be considered the next IE any more :) – ggedde Aug 04 '20 at 21:25
  • Yes works now on BugSur (11.4) and Safari 14.1.1 – notsure Jul 12 '21 at 07:24

9 Answers9

125

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

Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
kevin
  • 1,314
  • 1
  • 10
  • 6
  • 1
    According to that page, Safari doesn't seem to fully support it so that may be the case. Thank you for the link - it's a useful resource and I have bookmarked it for future reference! – Will WP Feb 28 '16 at 12:22
  • 7
    only workaround that I know of is to provide a `placeholder="yyyy-mm-dd"` attribute on the input tag, which safari / IE should use, but other browsers that do support the html5 date picker will ignore and instead use the operating system's recommended format (eg, for US users, will be "mm/dd/yyyy") instead. The placeholder format you choose should be consistent with how you're processing the field data on the server side. – JamesWilson Aug 17 '18 at 16:18
  • 97
    Four years later, and still no support for input[type=date]. What a joke of a browser. Safari is literally the 'new' IE. – Adam Williams Oct 11 '20 at 02:50
  • 40
    Make that 5 years later. – OverMars Feb 09 '21 at 17:51
  • 3
    [caniuse](https://caniuse.com/input-datetime) is now reporting that the next version of Safari will have partial support for the date type input. Took them long enough. – Skeets Feb 15 '21 at 03:32
  • 13
    Make that 6 Years later. – Karthik Saxena Mar 01 '22 at 18:12
  • 2
    Safari 14.1+ finally supports `input[type="date"]`. – marcel May 31 '22 at 11:21
  • 1
    It supports input[type="date"] but still it does not supports input[type="month"] – Shane Park Jan 27 '23 at 12:44
  • Not work in safari 16. Any solution? it still shows invalid date – Kowsigan Atsayam Feb 15 '23 at 14:07
43

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

Finlay Percy
  • 6,763
  • 4
  • 22
  • 28
  • Having tried this on an iOS Safari page this didn't seem to give the correct results, the date was still displayed in the "wrong" order as `1960-11-21` – Martin Jul 31 '20 at 14:18
  • 5
    Could you specify what you mean by "wrong order". To me it looks like "1960-11-21" is right based on the placeholder value "yyyy-mm-dd". If you want to use another placeholder pattern, you are free to edit it (e.g. dd-mm-yyyy or mm-dd-yyyy). – Antheus_S Nov 26 '20 at 14:01
23

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">
Aaron Mason
  • 310
  • 3
  • 11
drjorgepolanco
  • 7,479
  • 5
  • 46
  • 47
  • 5
    THis looks like a good solution, but it doesn't seem to work. I put the above in the head between script tags, and changed "your-date" to the id (and name) of my date input field in the form, but it makes no difference on safari - still just a blank text box. nothing on the console output – John Little Apr 08 '19 at 23:11
  • works for me! shall they use that ugly jquery-ui widget, I wont style it at all! – benzkji Nov 10 '20 at 11:46
  • would recommend not using a CDN though, but that's another story. – benzkji Nov 10 '20 at 11:47
13

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:

tanguy_k
  • 11,307
  • 6
  • 54
  • 58
  • not as obsolete: It will still be an issue for backward compatibility. But still finally! Great news you bring :) – jaycee Jan 29 '21 at 18:18
  • 2
    Wow...finally! What else is Apple going to take years to implement. Someone commented earlier - Safari is the new IE. Couldn't agree more. – rolinger Aug 03 '21 at 12:26
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>
conordarcy
  • 357
  • 1
  • 3
  • 9
  • Read this for info on the regex. https://stackoverflow.com/questions/15491894/regex-to-validate-date-format-dd-mm-yyyy – conordarcy Feb 24 '20 at 15:35
  • The question is about date inputs in __Safari__ – Michael Doye Feb 27 '20 at 10:44
  • @MichaelDoye Yes, the next step for Finlay Percy's example is to add HTML validation to the input using regex in the pattern attribute to ensure the user formats the input correctly. On Chrome for example you would get the native date picker but Safari would fallback to a text input with placeholder text. The pattern attribute would check if the value is in the correct format. – conordarcy Feb 28 '20 at 11:05
  • I've added a button to check if the value is valid. If not you get an error, if its fine the form submits & disappears. – conordarcy Feb 28 '20 at 11:08
1

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>
Hooman Bahreini
  • 14,480
  • 11
  • 70
  • 137
1

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.

Nico Serrano
  • 577
  • 4
  • 14
0

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]

Mostafa Esmaeili
  • 85
  • 1
  • 9
0

Safari gives the default date as today's date instead of DD/MM/YYYY, unlike Google Chrome or Firefox.

  1. Change the input field type to text and give a placeholder 'DD/MM/YYYY'
  2. Add a Ref to input so it can run the onFocus and onBlur events.
  3. Write an onFocus method to change the type to date and add an onBlur method to reverse it.

<input
  className="form-control"
  type={isIos?"text":"date"}
  ref={userDobRef}
  placeholder='dd/mm/yyyy'
  min="1900-01-01"
  id="account-phone"
  value={userDob?userDob:''}
  max={todaysDate}
  onFocus={() => {isSafari? userDob.current.type="date":null}}
  onBlur={()=> {if(!userDob.current.value && isSafari) userDob.current.type="text"}}
  onChange={(e) => { setUserDob(e.target.value);
   }}
 />
Deepak Yadav
  • 1