Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML 5 input type=“date” not working in Firefox

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 ?

like image 388
Aditi Avatar asked May 28 '15 09:05

Aditi


People also ask

Why datetime local is not working 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.

Is date valid in HTML5 forms?

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.

How do I format a date in YYYY-MM-DD in HTML?

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.

How do you change input type format to mm dd yyyy?

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.


2 Answers

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

like image 24
Massimiliano Arione Avatar answered Sep 17 '22 08:09

Massimiliano Arione


EDIT: from Firefox 57, <input type="date"/> is partially supported.


Firefox doesn't support HTML5's <input type="date"/> yet.

You have two options:

  • always use a Javascript datetime picker, or
  • check if the browser is supporting that tag, if yes use it, if no then fallback on a javascript datepicker (jQuery or some other one).

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.

like image 56
Andrea Ligios Avatar answered Sep 20 '22 08:09

Andrea Ligios