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

User · Answer

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

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"})

User · Answer

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

User · Answer

There s a simple way to get rid of this restriction by using the datePicker component provided by jQuery    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   Use the following snip     function               id of the component    datepicker   dateFormat   yy-mm-dd             See jQuery UI DatePicker - Change Date Format if needed

User · Answer

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   x000D   x000D   lt  doctype html gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml   gt  x000D   lt head gt  x000D       lt title gt Input Key Filter Test lt  title gt  x000D    lt meta name  author  content  Andrej Hristoliubov anhr mail ru  gt  x000D    lt meta http-equiv  Content-Type  content  text html  charset utf-8   gt  x000D    x000D    lt  -- For compatibility of IE browser with audio element in the beep   function  x000D   https   www modern ie en-us performance how-to-use-x-ua-compatible -- gt  x000D    lt meta http-equiv  X-UA-Compatible  content  IE 9   gt  x000D    x000D    lt link rel  stylesheet  href  https   rawgit com anhr InputKeyFilter master InputKeyFilter css  type  text css  gt    x000D    lt script type  text javascript  src  https   rawgit com anhr InputKeyFilter master Common js  gt  lt  script gt  x000D    lt script type  text javascript  src  https   rawgit com anhr InputKeyFilter master InputKeyFilter js  gt  lt  script gt  x000D    x000D   lt  head gt  x000D   lt body gt  x000D    lt h1 gt Date field lt  h1 gt  x000D      Date  x000D       lt input type  date  id  date    gt  x000D      New date   lt span id  NewDate  gt  lt  span gt  x000D       lt script gt  x000D          CreateDateFilter  date     x000D                  formatMessage   Please type date  s  x000D                    onblur  function  target    x000D                      if  target value    target defaultValue  x000D                          return  x000D                      document getElementById  NewDate   innerHTML   target value  x000D                    x000D                    min  new Date  new Date   getFullYear   - 10  toString    toISOString   match       T    i  1    2006-06-27   10 years ago x000D                    max  new Date   toISOString   match       T    i  1    2016-06-27    Current date x000D                    dateLimitMessage   Please type date between   min  and   max   x000D                x000D             x000D       lt  script gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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     lt input type  text  class  datepicker  name  your-name    gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Here is a full example with the date formatted in YYYY-MM-DD   lt script type  text javascript  src  http   code jquery com jquery-2 1 4 min js  gt  lt  script gt    lt script src    cdn jsdelivr net webshim 1 14 5 polyfiller js  gt  lt  script gt   lt script gt  webshims setOptions  forms-ext    types   date     webshims polyfill  forms forms-ext      webshims formcfg     en        dFormat   -       dateSigns   -       patterns            d   yy-mm-dd              lt  script gt   lt input type  date    gt

User · Answer

lt  doctype html gt   lt html lang  en  gt   lt head gt     lt meta charset  utf-8  gt     lt title gt jQuery UI Datepicker - Default functionality lt  title gt     lt link rel  stylesheet  href    code jquery com ui 1 11 4 themes smoothness jquery-ui css  gt     lt script src    code jquery com jquery-1 10 2 js  gt  lt  script gt     lt script src    code jquery com ui 1 11 4 jquery-ui js  gt  lt  script gt     lt link rel  stylesheet  href   resources demos style css  gt     lt script gt      function              datepicker    datepicker             lt  script gt   lt  head gt   lt body gt    lt p gt Date   lt input type  text  id  datepicker  gt  lt  p gt     lt  body gt   lt  html gt

User · Answer

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    lt input class  datepicker  gt       datepicker   datepicker       format   mm dd yyyy

User · Answer

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

User · Answer

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    lt  -- cdn for modernizr  if you haven t included it already -- gt   lt script src  http   cdn jsdelivr net webshim 1 12 4 extras modernizr-custom js  gt  lt  script gt   lt  -- polyfiller file to detect and load polyfills -- gt   lt script src  http   cdn jsdelivr net webshim 1 12 4 polyfiller js  gt  lt  script gt   lt script gt    webshims setOptions  waitReady   false     webshims setOptions  forms-ext    types   date       webshims polyfill  forms forms-ext     lt  script gt    lt input type  date    gt    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

User · Answer

Here is the proper solution  You should use jquery datepicker everywhere     lt script gt       function              simple date    datepicker              lt  script gt    Below is the link to get the complete code  https   tutorialvilla com how how-to-solve-the-problem-of-html-date-picker

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

Examples related to html

Examples related to forms

Examples related to jquery-ui

Examples related to internet-explorer

Examples related to firefox