Input type="date" 在 Chrome 中有效，但在 Firefox 中无效

Question

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

如果您使用 Chrome 打开它，您会看到有 2 个 date 字段，您可以在其中选择具有正确格式的数据（还显示了向上和向下箭头以增加或减少数据）但是如果您使用 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'，即 1999-12-03。如果您想更改它，请将其设置为 'dd-mm-yy'，但对于数据库应用程序，我建议您保持原样。

Input type="date" 在 Chrome 中有效，但在 Firefox 中无效

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

html

firefox

html-input