16

Is there any way that I can set enable a datepicker in firefox(version 21) with HTML 5. I dont want to use a jQuery based datepicker because javascript will be disabled in the browsers where the website will be used. The datepicker works fine with Chrome.

So if html 5 datepicker is not supported,how can I add a datepicker without jquery ?

Aravind Bharathy
  • 1,540
  • 3
  • 15
  • 32
  • Install Firebug and see what console shows. Maybe you get an error. – Snake Eyes Jun 25 '13 at 08:50
  • 1
    If a datepicker isn't built into the browser, you have to add your own using JavaScript. I'm not sure what other solution you think might exist. [Here's one good approach that uses Modernizr to load jQuery-UI's datepicker only when it's needed](http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/). – Blazemonger Sep 18 '13 at 19:05
  • 9
    Almost two years and more than fifteen versions of Firefox later, no support for date and time input types in sight. This is... upsetting. But who cares about date picking when they have a Firefox OS to thrive on, right? – Giulio Piancastelli Apr 16 '15 at 13:16

5 Answers5

14

jQuery UI has a datepicker widget that you can conditionally load if the browser doesn't have one built in. The catch is that even if you only select the datepicker widget in a custom jQuery UI build, it's still a significant download.

My favorite solution is to use yepnope, which comes with Modernizr, to conditionally load the jQuery UI CSS and JS files only if needed for the datepicker. By combining this with an optimized build of Modernizr and a datepicker-only jQuery UI build, it gives you the smallest download for all possible browsers.

yepnope({ /* included with Modernizr */
  test : Modernizr.inputtypes.date,
  nope : {
    'css': '/path-to-your-css/jquery-ui-1.10.3.custom.min.css',
    'js': '/path-to-your-js/jquery-ui-1.10.3.datepicker.min.js'
  },
  callback: { // executed once files are loaded
    'js': function() { $('input[type=date]').datepicker({dateFormat: "yy-mm-dd"}); } // default HTML5 format
  }
});
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
13

Firefox 57 (Nov 14, 2017) supports it:

http://caniuse.com/#feat=input-datetime

ceving
  • 21,900
  • 13
  • 104
  • 178
Abel Pastur
  • 1,905
  • 2
  • 24
  • 31
2

Old question, but I found this here (firefox 54), at least, which gives hope:

Go to about:config and search for dom.forms.datetime

Set both entries found to true, et voilà! Now all they need to do is enable them by default!

Stephanie Peters
  • 260
  • 1
  • 9
2

Firefox 57 finally has a datepicker with a clickable calender (<input type="date">).

enter image description here

The timepicker is just a text field that limits input to valid times. Sadly, it only supports 12 hour time format (<input type="time">).

enter image description here

datetime-local still isn't supported (<input type="datetime-local">).

Max M.
  • 51
  • 5
1

Firefox (version 21) doesn't support input type=date.

Here you have a site that tells you what it supports and what it doesn't Firefox21

maqjav
  • 2,310
  • 3
  • 23
  • 35