'Input type="date" working in Chrome but not in Firefox

I am not so into HTML and I have the following problem into this web page: http://www.saranistri.com/saranistriWPnew/richiesta-online-di-foto-storiche/

If you open it using Chrome you can see that there are 2 date fields in which you can choose the data with its correct format (there is shown also the up and down arrows to increare or decrease the data) but if you open this page using FireFox these field are not correctly displayed (the 2 arrows are not shown and the date format is not specified).

Using FireBug I can see that these are implemented by this HTML section:

<p>
Periodo
<br>
da
    <span class="wpcf7-form-control-wrap date-from">
        <input class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" type="date" value="" name="date-from">
    </span>
a
    <span class="wpcf7-form-control-wrap date-to">
        <input class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" type="date" value="" name="date-to">
    </span>
</p>

As you can see it is specified the type="date". Why Chrome show it correctly and Firefox not? I have the same problem also using Explorer.

How can I fix this issue?

htmlfirefoxhtml-input


Solution 1:[1]

Firefox (and IE) currently do not support input type="date" yet. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Browser_compatibility

You can use a datePicker plugin at your leisure, for those browsers that don't support native html5 input date

Solution 2:[2]

I had the same issue with my project. You don't have to do any complicated modifications to make it work.

Simply copy and paste the code below right above your </body> tag:

<script type="text/javascript">
      var datefield=document.createElement("input")
      datefield.setAttribute("type", "date")
      if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
         document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"><\/script>\n')
        document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"><\/script>\n')
      }
   </script>

 <script>
    if (datefield.type!="date"){ //if browser doesn't support input type="date", initialize date picker widget:
       jQuery(function($){ //on document.ready
           $('input[type=date]').datepicker({
                  dateFormat : 'yy-mm-dd'
                });
       })
    }
 </script>

This will allow you to keep using <input type=date> even in browsers that do not support HTML5 completely.

Just remember to have good placeholders in all the input field so that the user knows the format to enter the date in manually also if he chooses to.

ALSO PLEASE NOTE THE format for date here is 'yy-mm-dd' i.e it will look like this 1999-12-03. If you want to change it, make it 'dd-mm-yy' but for database applications I'd suggest you leave it as is.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Jesil Jose

Related Questions