IE Input type Date not appearing as Date Picker [duplicate]

Question

I am using the input type DATE in my HTML and everything works fine in Chrome and Firefox, but IE does not show the date picker.

When I use the JQuery Datepicker I get two date picker dialogs in Chrome and Firefox.

How can I fix the functionality where I can have the date input type and only have one popup for my form?

Answer 1

You need to use a polyfill so that the input type DATE has a consistent behaviour in all browsers. You can use this webshim as a polyfill.

Input type DATE is an HTML5 feature which is not supported by all browsers. In case you want to use the HTML5 feature not supported by your browser (which usually will be IE) then use two things:

• Feature Detection
• Polyfills

Feature Detection is the ability to determine if the HTML5 feature is supported or not by our browser. A good library for that is Modernizr. What you can do with modernizr is to detect if any feature that you need is not supported and if not then you can conditionally load some javascript libraries that will implement that feature. Those libraries are called Polyfills.

So for example if you want to use the tag in IE 10 you could use the jqueryui.com controls to provide a date picker.

Modernizr.load({
    test: Modernizr.inputtypes.date,
    nope: "js/jquery-ui.custom.js",
    callback: function() {
      $("input[type=date]").datepicker();
    }
  });

Modernizr tests if the feature is supported, optionally you can use the nope to indicate if there is a library that you want to load ONLY if the feature is not supported, and callback is the code that will be called after the test and after loading the library.