I am using HTML5 <input type="date" />
, which works fine in Chrome and I get the calendar popup to select the date.
But in firefox it acts like a text box and no calendar pops up.
After doing few research I see few solutions using webshims, modenizr, etc... but I do not want to use jQuery.
Is there an alternative for this? How can I make it work in Firefox ?
Input type "datetime-local" is not supported in Firefox hence it shows a text box, in this case, you can use input type as "date". As "datetime-local" shows the time as well and if you have the same requirement, you can use Input type "time" also to show the time.
The date and time input types produce controls for entering dates and time in the correct format, including providing native date pickers in some browsers. Date related types include: type=date (yyyy-mm-dd) Year, month, and day, with no time.
The HTML5 date input specification refers to the RFC 3339 specification, which specifies a full-date format equal to: yyyy-mm-dd . See section 5.6 of the RFC 3339 specification for more details. This format is used by the value HTML attribute and DOM property and is the one used when doing an ordinary form submission.
To set and get the input type date in dd-mm-yyyy format we will use <input> type attribute. The <input> type attribute is used to define a date picker or control field. In this attribute, you can set the range from which day-month-year to which day-month-year date can be selected from.
It's now working. Since Firefox 53, you can activate it in about:config
by enabling dom.forms.datetype
option. See http://caniuse.com/#feat=input-datetime and https://developer.mozilla.org/en-US/Firefox/Experimental_features
EDIT: from Firefox 57, <input type="date"/>
is partially supported.
Firefox doesn't support HTML5's <input type="date"/>
yet.
You have two options:
This is called Feature Detection, and Modernizr is the most popular library for this.
Using always a javascript datepicker is easier and faster but it won't work with javascript disabled (who cares), it will work very bad on mobile (this is important) and it will smell of old.
Using the hybrid approach instead will let you cover every case now, up to the day when every browser will support the HTML5 datepicker, in a standardized way and without needing javascript at all. It is future-proof, and this is especially important in mobile browsing, where the javascript datepickers are almost unusable.
This is a kick off example to do that on every <input type="date"/>
element of every page automatically:
<script>
$(function(){
if (!Modernizr.inputtypes.date) {
// If not native HTML5 support, fallback to jQuery datePicker
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat : 'yy-mm-dd'
},
// Localization
$.datepicker.regional['it']
);
}
});
</script>
It uses jQuery because I use jQuery, but you are free to substitute the jQuery parts with vanilla javascript, and the datepicker part with a javascript datepicker of your choice.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With