Rectangle 27 0

html5 How to get HTML 5 input type="date" working in Firefox andor IE 10?


<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

I get an "access is denied" error when I try to run this jsfiddle in IE 11, and the date picker doesn't work.

In case the default configuration does not satisfy, there are many ways to configure it. Here you find the datepicker configurator.

Thanks Alex, I have included it as a post for my site. zeeshanarshad.com/

This is done via the language configuration. do webshim.activeLang('en-US'); see also: afarkas.github.io/webshim/demos/demos/

You can try webshims, which is available on cdn + only loads the polyfill, if it is needed.

this is nice solution, configuration is rich, but I cannot find where to set date format like "YYYY/MM/DD"

Note
Rectangle 27 0

html5 How to get HTML 5 input type="date" working in Firefox andor IE 10?


$.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');
Note
Rectangle 27 0

html5 How to get HTML 5 input type="date" working in Firefox andor IE 10?


I don't agree, browsers should be smart enough to figure this out. I really am tired using the date pickers out there and having to keep updating them.

I would not rely on this input type at this point. It would be nice to have, but I do not foresee this one actually making it. The #1 reason is it puts too much burden on the browser to determine the best UI for a somewhat complicated input. Think about it from a responsive perspective, how would any of the vendors know what will work best with your UI say at 400 pixels, 800 pixels and 1200 pixels wide?

Strange reasoning. Too much burden for the browsers, but not for joe web developer?!?

The type="date" is not an actual specification at this point. It is a concept Google came up with and is in their whatwg specifications (not official) and is only partially supported by Chrome.

Note
Rectangle 27 0

html5 How to get HTML 5 input type="date" working in Firefox andor IE 10?


<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />

Does anyone know if this allows the option to add a time picker as well?

Here is a full example with the date formatted in YYYY-MM-DD

I tried your script in JSFiddle @Drooh but it does not work. Every time I select a date it appears for like a millisecond in the input field and then disappears. Can someone provide a working fiddle version with a date configuration dd/mm/yyyy?

I've found this to be the best solution until firefox adds a date input stackoverflow.com/questions/2528706/

Note, as of Aug 2016 webshim does not work with jQuery 3 and in my testing it doesn't work with 2.2.4 either.

Note
Rectangle 27 0

html5 How to get HTML 5 input type="date" working in Firefox andor IE 10?


@M.M Thanks. HTML 5 has in the meantime been upgraded to an official W3C recommendation. The new link is w3.org/TR/2014/REC-html5-20141028/

I don't agree, browsers should be smart enough to figure this out. I really am tired using the date pickers out there and having to keep updating them.

I too am glad for every new input type. They are better defined, and native, which usually means fast.

I would not rely on this input type at this point. It would be nice to have, but I do not foresee this one actually making it. The #1 reason is it puts too much burden on the browser to determine the best UI for a somewhat complicated input. Think about it from a responsive perspective, how would any of the vendors know what will work best with your UI say at 400 pixels, 800 pixels and 1200 pixels wide?

Strange reasoning. Too much burden for the browsers, but not for joe web developer?!?

The type="date" is not an actual specification at this point. It is a concept Google came up with and is in their whatwg specifications (not official) and is only partially supported by Chrome.

Note
Rectangle 27 0

html5 How to get HTML 5 input type="date" working in Firefox andor IE 10?


It is in Firefox since version 51 (January 26, 2017), but it is not activated by default (yet)

Note
Rectangle 27 0

html5 How to get HTML 5 input type="date" working in Firefox andor IE 10?


  • Use the following snip $(function() { $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); });

Include jQuery and jQuery UI libraries (I'm still using an old one)

There's a simple way to get rid of this restriction by using the datePicker component provided by jQuery.

You needs to include jQuery UI CSS as well for showing the calendar properly. <br> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

Note
Rectangle 27 0

html5 How to get HTML 5 input type="date" working in Firefox andor IE 10?


It is in Firefox since version 51 (January 26, 2017), but it is not activated by default (yet)

Note
Rectangle 27 0

html5 How to get HTML 5 input type="date" working in Firefox andor IE 10?


$(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });
<input type="text" class="datepicker" name="your-name" />

Id's should be unique for every field, so, if you have multiple date fields in your form (or forms), you could use the class element instead of the ID:

Now, every time you need the date picker, just add that class. PS I know, you still have to use the js :(, but at least you're set for all your site. My 2 cents...

This is just a suggestion that follows Dax's answer. (I would put it in a comment at that answer, but I don't have enough reputation yet to comment on others questions).

and your input as:

Note
Rectangle 27 0

html5 How to get HTML 5 input type="date" working in Firefox andor IE 10?


<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

Note: While there might be new bugfix releases for webshim in the future. There won't be any major releases anymore. This includes support for jQuery 3.0 or any new features.

I get an "access is denied" error when I try to run this jsfiddle in IE 11, and the date picker doesn't work.

In case the default configuration does not satisfy, there are many ways to configure it. Here you find the datepicker configurator.

This does not work on IE10...i get the same error as mentioned by @Shavais ...to get it working upgrade the jquery version to 1.11 or above..try this link

Unfortunatelly, the webshims support to upcoming Jquery 3 won't be done, as informed on author's site. Being so, I would rely on good and old Jquery UI.

You can try webshims, which is available on cdn + only loads the polyfill, if it is needed.

fiddle demo doesn't work in IE11

Note