How to get HTML 5 input type="date" working in Firefox and/or IE 10

html

responsive-design

polyfills

modernizr

byAlex Kataev·Oct 17, 2024

Use a polyfill like Pikaday or jQuery UI DatePicker to backport HTML5 input type="date" support for browser veterans like Firefox and IE 10.

Pikaday example:

<!-- not your grandmother's calendar -->
<input type="text" id="datepicker">
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<script>
    new Pikaday({ 
        // assigns the datepicker to your input ID
        field: document.getElementById('datepicker'),
        // adopting the mysterious ISO date format
        format: 'YYYY-MM-DD'
    });
</script>

jQuery UI DatePicker example:

<!-- style blocker, keep visual consistency -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" id="datepicker">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    // call the datepicker into action!
    $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
</script>

While both snippets offer a quick fix, use the one that seamlessly conforms to your existing scripts and styles.

Up and coming browser support

The route to widespread support

Developments in Firefox 57+ mean input type="date" is now natively supported, making polyfills redundant in these versions. The Webshims library, however, is still a trusty companion for dealing with elder versions.

Tuning your polyfill for performance

Configure your polyfill with options like waitReady set to false for faster loads. Coupled with Modernizr, a feature-detection library, webshim is efficiently loaded only when necessary.

Conforming to site aesthetics and responsive design

Responsive designs and consistent styling for date inputs are essential in UI/UX. Always ensure your datepicker matches your website’s theme and layout.

Practical solutions and alternatives

Quantifying jQuery UI DatePicker

In jQuery UI DatePicker, remember to tweak the dateFormat to suit your localization requirements. Various formats like mm/dd/yy for U.S. or dd/mm/yy for EU can be easily tailored.

Unleashing the webshims arsenal

Turn to Webshims for more complex scenarios. Visit their demo and configurator to customize settings, including date format preferences. Keep the library files updated for ongoing compatibility and new feature access.

The upper hand with Modernizr

Combining Modernizr with webshims works brilliantly for progressive enhancement. Modernizr inspects browser capabilities, loading polyfills only when needed.

Explicit Fall-back strategies

In times of increased UI complexity or unsupported browsers, you might contemplate alternative approaches like custom-built date selectors or using 'input type="text"' along with pattern validation.

explain-codes / Html / How to get HTML 5 input type="date" working in Firefox and/or IE 10

Linked

Is there any way to change input type="date" format?



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



Are there any style options for the HTML5 Date picker?



Html5shiv vs Dean Edwards IE7-js vs Modernizr - which to choose?



Not showing placeholder for input type="date" field

