Question

我不喜欢HTML，我在这个网页上遇到以下问题：http://www.saranistri.com/saranistriWPnew/richiesta-online-di-foto-storiche/

如果您使用 Chrome 打开它，则可以看到有2个日期字段，您可以在其中选择格式正确的数据（还显示了向下箭头以增加或减少数据）但如果您使用 FireFox 打开此页面，则这些字段未正确显示（未显示2个箭头且未指定日期格式）。

使用 FireBug 我可以看到这些是由此HTML部分实现的：

<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>

如您所见，指定了 type =“date”。为什么Chrome会正确显示而Firefox却没有？我也有同样的问题使用资源管理器。

如何解决此问题？

Answer 1

Firefox（和IE）目前还不支持input type="date"。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Browser_compatibility

对于那些不支持原生html5输入日期的浏览器，您可以随意使用datePicker插件

Answer 2

我的项目遇到了同样的问题。您不必进行任何复杂的修改即可使其正常工作。

只需复制并粘贴</body>标记正上方的代码：

<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>

即使在完全不支持HTML5的浏览器中，也可以继续使用<input type=date>。

请记住在所有输入字段中都有好的占位符，以便用户在选择时也知道手动输入日期的格式。

另请注意，此处的日期格式为“yy-mm-dd＆＃39;即它看起来像1999-12-03。如果你想改变它，那就去做吧`dd-mm-yy＆＃39;但是对于数据库应用程序，我建议你保持原样。

输入类型=“日期”在Chrome中有效但在Firefox中无效

2 个答案: