How to make `` supported on all browsers? Any alternatives?

Detect browser support

Before launching a JavaScript date picker, check if the browser supports input[type="date"]. Inspect the type property of the input element rather than checking the type attribute:

var input = document.createElement('input');
input.setAttribute('type', 'date');
var unsupportedDateField = input.type !== 'date';
// Is it a date field or just pretending to be one? 😏


If unsupportedDateField is true, it signals that the browser defaults date inputs to text fields. That's your cue to roll out a handy JS date picker.

Feature detection using Modernizr

For a more robust feature detection, you might find Modernizr useful:

<script src="modernizr.js"></script>


Check if the date type is supported:

if (!Modernizr.inputtypes.date) {
    // Uh-oh! Time to take out our trusty date picker.
}


Modernizr's website lists recommended polyfills like WebShims to emulate the date (and time) input for unsupported browsers. This approach keeps accessibility and usability in check.

Taking care of sparse browser support

What if the input[type="date"] isn't supported? You have several fallback options. First, implement a jQuery UI Datepicker:

if (unsupportedDateField) {
    $('#datepick').datepicker();
    // Who needs built-in support when you've got a datepicker? 🎉
}


Or, go for a user-friendly Placeholder or jQuery.maskedinput to mimic formatted text input if JavaScript is disabled or fails:

<input type="text" id="datepick" placeholder="mm/dd/yyyy">


Also, consider technologies like WebShims, which provide fallback support for HTML5 features:

<script src="webshim.js"></script>
<script>
webshims.setOptions('forms-ext', {type: 'date'});
webshims.polyfill('forms forms-ext');
</script>


Attractive alternatives to jQuery datepicker

While jQuery UI's Datepicker is quite popular, you have other diet alternatives that can fit your project needs without adding unnecessary calories:

• Zebra Datepicker: Lean and mean with lots of ways to customize.
• Flatpickr: Power-packed with language options and themes.
• Pikaday: Simple setup with zero dependencies when used with native JavaScript.

Getting lightweight libraries off the ground

When it comes to features versus file size, lightweight libraries opt for the essentials. Both Zebra Datepicker and Pikaday offer the basics without the bloat. Remember to test these in different scenarios, including mobile browsers, to ensure responsive behavior.

Giving users a seamless experience

As you integrate a fallback, don't forget about the user experience. For instance, you might want to prepopulate the date picker with a current date, handle different date formats, and even localize the calendar.

Tackling dependencies

Adding third-party libraries like jQuery UI into your workflow means extra HTTP requests and potential load times. You can minimize these impacts by using CDN hosted files or concatenate your JS files.