HTML5 date picker doesn't show on Safari

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

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

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