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

Question

I find it odd that input type="date" is still not supported in Firefox after all of this time. In fact, I don't think they added in much (if any) of the HTML 5 new types on an input element. Not surprised that it is not supported in IE10. So, my question is...

How to get type="date" on an input element working without adding, yet another, .js file (namely jQueryUI DatePicker Widget) just to get a calendar/date for only IE and Firefox Browsers? Is there something out there that can be applied somewhere (CDN perhaps?) that will make this functionality work by default in Firefox and/or IE Browsers?? Trying to target IE 8+ Browsers and for Firefox, doesn't matter, newest version (28.0) will be fine.

UPDATE: Firefox 57+ supports input type=date

Inseparable

Seems ridiculous to me that Firefox still doesn't support this. I've switched from Chrome to Firefox today, just for a day/week to see what's what these days, and this immediately has me wanting to switch back! – Thinker

its a joke FF not supping date – Rida

Mozilla is dropping Thunderbird so they can laser focus on Firefox. Not sure why this has not been put near the top of the list. blog.mozilla.org/thunderbird/2015/12/… – Humbert

This is why I feel upset when people say Firefox is the best browser. – Rutan

Related: https://mcmap.net/q/130137/-html-5-input-type-date-not-working-in-firefox – Koren

While not a polyfill, I just ended up using pickaday which is a plain js lib without jquery or other dependencies... – Symptomatic

It is now available in nightly. wiki.mozilla.org/TPE_DOM/Date_time_input_types – Tother

Same with me, I periodically switch to Firefox because I don't like the insane amount of spying that Chrome does. Every time I end up switching back because FF, in my opinion, is just a bad browser. I'm on Linux and it just feels broken. – Rottweiler

Seems to be working by default in Firefox 57. Still! – Kaffir

Firefox desktop now and for sometime supports input types date (with a nice picker), time. – Ringdove

Answer 1

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

Here is a demo with CDN: http://jsfiddle.net/trixta/BMEc9/

<!-- 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" />

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

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.

Gallbladder

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

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

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

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

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

Your fiddle works well for IE11 @Nitin. But as Damjan puts it, "Too many clicks". It's strange to use the first time round (selecting year, month then day). – Uncircumcision

You could configure it how you want. Here is the configurator: afarkas.github.io/webshim/demos/demos/cfgs/… – Gallbladder

Yes I did find the configurable options. However it doesn't have anything for configuring format of the date. Great for Americans, not so good for other users like in Australia or the Uk... (DD/MM/YYYY) – Uncircumcision

Last option on the right side. Or read the manual like any other programmer. – Gallbladder

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. – Causeuse

This definitely works in firefox. But did not work in IE – Schadenfreude

This works like a charm in Firefox and Safari . Was using JQuery3 and got it to work with jquery-migrate . – Purser

webshims has been deprecated. – Warthman

Note that this does not work when you want to set the DOM property via JavaScript. IE11 will still crash, because it does not let you set the "type" property to "date". It'll throw SCRIPT87: Invalid argument. – Alie

Answer 2

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

To activate it:

about:config

dom.forms.datetime -> set to true

https://developer.mozilla.org/en-US/Firefox/Experimental_features

Prestigious

Glad to hear this. Should be on by default imo. But this is good to know. – Inseparable

I'm on FF 64.0.2, but even though this option is "true" (on) it does not work, the datetime box is still only text. I've try to enable the "timepicker" with also no success. – Solitaire

Answer 3

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

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

   • src="js/jquery-1.7.2.js"
   • src="js/jquery-ui-1.7.2.js"

2. Use the following snip

   $(function() {
        $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
   });
   

See jQuery UI DatePicker - Change Date Format if needed.

Nydianye

OP says "working without adding, yet another, .js file (namely jQueryUI DatePicker Widget)" ... but this question is google's top hit, so your answer is still VERY helpful indeed although it doesn't answer the question. I wish I didn't have to feel bad for upvoting your post now. – Appendicitis

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"> – Kovach

Answer 4

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.

http://caniuse.com/#search=date

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?

Pilch

Ok, thanks for your input on this. I suppose using jQueryUI is the best way for now... argg. Guess you are right. – Inseparable

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. – Rida

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

This is now part of the HTML 5 working draft: w3.org/html/wg/drafts/html/master/… – Acetous

@Acetous hopefully HTML 6 will focus on being useful rather than on marketing... Date picker is kind of a fundamental control. – Mineraloid

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

@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/… – Acetous

The problem happens when your client wants the date picker to look a certain way to fit their branding requirements. But each browser implements something different and you have very little styling if any at all to brand it to your client's requirements.... – Pilch

I do not agree. The parts of a standard date picker can be defined to be stylable by CSS as all the other elements and as we do by using various CSS selectors. All the date pickers out there are doing it already, but only with custom html elements like divs etc. In additon to that If the date related business logic is handled by the browser for all localizations and internationalization properly, which is widely adopted by the OSes, it will be very useful and web developers will not be discovering the date time wheel from the beginning with each date time picker or date time library. – Ringdove

Answer 5

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

<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" />

Humbert

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

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? – Uncircumcision

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. – Humbert

I've found this to be the best solution until firefox adds a date input #2529206 – Humbert

Answer 6

While this doesn't allow you to get a datepicker ui, Mozilla does allow the use of pattern, so you can at least get date validation with something like this:

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

Ultimately I agree with @SuperUberDuper in that Mozilla is way behind on including this natively.

Sinuate

is there a version for "time"? – Cupulate

Please expand on this example. Is this an html attribute for the input? – Solitaire

Answer 7

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).

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:

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

and your input as:

 <input type="text" class="datepicker" name="your-name" />

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...

Venation

Answer 8

The latest version of firefox the firefox 57(Quantum) supports date and other features it was released on November 14, 2017. You can download it by clicking this link

Pony

Answer 9

Sometimes you do not want use Datepicker http://jqueryui.com/datepicker/ in your project because:

• You do not want use jquery
• Conflict of jquery versions in your project
• Choice of the year is not convenient. For example you need 120 clicks on the prev button for moving to 10 years ago.

Please see my very simple cross browser code for date input. My code apply only if your browser is not supports the date type input

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [email protected]">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>

Eulalia

This code completely fails. I can't type in a date because the field is already filled with "YYY-MM-DD", and if I try to clear it, it reappears. – Bala

Please do not delete hyphens. I have successfully tested in Windows 10 Google Chrome 52, Firefox 41, Opera 39, Microsoft Edge, IE 11.Please tell me your device, OS and browser. – Eulalia

I'm actually just hitting the "Run Code Snippet" link just below your comment. I can't type a date properly because the "YYYY-MM-DD" placeholder is actively competing with me rather than disappearing when I start typing. I'm using latest Firefox on Windows 10. – Bala

doesn't answer question as violates the condition of not adding external JS files, and actually code itself is completely unintuitive to use. forces ISO format on people even when its not their native date format, can't type in a fresh date as input mask reappears, can't over type input mask as its not a mask but actual text in box, have to delete mask as you type. not in anyway better than a standard input with regex validation – Rickey

Answer 10

You can use this datepicker functionality in anywhere just need to call on Master.aspx or Layout page

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

   src="js/jquery-1.7.2.js"
   src="js/jquery-ui-1.7.2.js"
   

then add this script and this is working on all platforms.

 <script>
jQuery(function ($) { // wait until the DOM is ready
            $(".editorDate").datepicker({ dateFormat: 'yy-mm-dd' });
        });`
 </script>

you can add this "editorDate" on multiple pages.

@Html.TextBoxFor(model => model.FromDate, "{0:yyyy-MM-dd}", htmlAttributes: new { @class = "form-control editorDate"})

Ratsbane

Answer 11

Thank Alexander, I found a way how to modify format for en lang. (Didn't know which lang uses such format)

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

 $.webshims.activeLang('en');

Pedalfer

I think the only 'en' country that uses that format is Canada. In any case, 'en' is ambiguous, because it also includes the United States, which has a 'special' date format pretty much of its own. – Geum

In my case it's about overriding date format for any client locale, which might differ on client workstations. However on one particular page I want to use this date format (for copy paste reason). It's more like comment for Alexander Farkas answer but I put as separate answer because I can't paste code in comment. I'm using this in production environment for more than a year. – Pedalfer

Be careful. If Webshims relies on browser interpretation of the locale, you may will have unpredictable results. 'en' probably won't mean the same format on different platforms (depending on the system locale) or even in different browsers. It may be interpreted as 'en-ca' by a browser in Canada (which is most likely yyyy-mm-dd, but possibly not consistent) but 'en-in' by a browser in India (which, like most of the world, would produce dd-mm-yyyy). Just because it's in production code doesn't mean it's been properly tested—a lot of i18n bugs exist in production code, even on big sites. – Geum

The last line $.webshims.activeLang('en'); should force lang (or locale) to webshims overriding browser settings, so the format is always same. – Pedalfer

Answer 12

Here is the proper solution. You should use jquery datepicker everywhere

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

Below is the link to get the complete code

https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

Wigwam

Answer 13

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

Compartment

Answer 14

Here is the perfect solution. You should use JQuery datepicker to user input date. It is very easy to use and it have lot of features that HTML input date don't have.

Click here to copy the JQuery datepicker code

Wigwam

Answer 15

I had to use bootstrap-datepicker plugin to get the calendar working on Firefox 55 Portable:

https://bootstrap-datepicker.readthedocs.io/en/latest/

Compatible with Bootstrap v2 and v3. It comes with a standalone stylesheet so you don't have to depend on Bootstrap.

Usage:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});

Keesee