Html5 date picker doesn't show on Safari

Comprehensive Guide

Validate Browser Support and Build Fallback

Before implementing a HTML5 date picker, it's highly recommended to perform a conditional check for type attribute support:

// "Are you sure we're on a date, Safari? Because it doesn't feel like it."
var dateInput = document.querySelector('input[type="date"]');
if (!dateInput || dateInput.type !== 'date' || !dateInput.checkValidity()) {
    // Load polyfill here
}


Placeholder: The Humble Helper

You can use a placeholder with its value set in yyyy-mm-dd format, acting as a guide for the expected input. This approach is totally unobtrusive and doesn't conflict with native support:

<!-- "Just following the yyyy-mm-dd road!" -->
<input type="date" placeholder="yyyy-mm-dd" />


Crafting User Experience on Non-Supporting Browsers

In order to smooth out the user experience on Safari and other non-supportive browsers, consider initiating a jQuery UI date picker when native support doesn't exist:

if (!document.createElement('input').type === 'date') {
    // Laughing in the face of adversity... and non-supportive browsers.
    $('#datepicker').datepicker();
}


Employing Browser Detection and Conditional Loading

Browser detection can be used to conditionally load additional libraries like jQuery UI for browsers that show less love for the HTML5 date picker:

// Safari is playing hard to get. Let's try some smooth talking.
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
if (isSafari && document.querySelector('input[type="date"]').type !== 'date') {
    // Load jQuery UI DatePicker
}


Prepping for Future Browser Updates

Safari Resonates with Change

With each release, Apple amazes its users with advancements. Safari 15 is expected to be a game-changer for HTML5, resulting in natives fully supportive of the date picker.

The Syntax & Structure Mantra

Adherence to proper syntax and structure is the key to a successful cross-browser application. Rules weren't meant to be broken here!

Compiled Troubleshooting Tips

Working through safari's oddities

When problems arise, a systematic troubleshooting procedure is a savior. Documentation and known bug reports align along with regular tests across different Safari versions.

Developer's Tool Chest

Judge a developer by the tools they use and the resources they maintain: Polyfill libraries, MDN documentation, and developer communities are just a few bookmarks away.