Chrome的type="date"和jquery ui日期选择器冲突问题

Question

我有一个输入框，类型为“date”，在IE中一切正常，但在最新版本的Chrome中，它带有旋转器、向下箭头和mm/dd/yyyy的占位符。

在Chrome中，单击该字段时，Chrome会打开一个日期选择器，我已经映射了jquery ui的日期选择器以供我的应用程序使用。这两者都会发生冲突，如下所示：

我已经应用了以下修复方法：

input[type="date"]::-webkit-calendar-picker-indicator{
    display:none;
    -webkit-appearance: none;
    margin: 0;
}
input[type="date"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}
/** THIS DOESN'T WORK **/
input[type="date"]::-webkit-input-placeholder{
    display:none !important;
    -webkit-appearance: none !important;
        visibility: hidden !important;
}
/** THIS DOESN'T WORK **/

在添加了上述代码之后，它看起来很聪明： 上面的代码隐藏了Chrome日期选择器中触发旋转和箭头的内容。但是有一个问题，输入文本框中仍然存在占位符（“mm / dd / yyyy”）；我的jquery ui日期选择器出现得很好，但当我选择任何日期时，占位符仍然存在。

该输入框中没有设置任何值。

需要知道如何删除该占位符以设置值；我正在使用yyyy / mm / dd的日期格式。

Chrome版本为：Version 27.0.1448.0

提前致谢！

- GOK

---

我在谷歌上搜索发现这似乎是一个Chromium的bug，如果是的话，那么它已经解决了吗？ - GOK

请看这里：https://dev59.com/qmgu5IYBdhLWcg3wbWo9 - Irvin Dominin

Answer 1

Chrome 27现在支持datepicker字段类型（与Opera一样）

您可以使用modernizr.js检查是否支持日期字段。如果浏览器支持日期字段，则Modernizr.inputtypes.date返回true。

以下代码仅在不支持日期字段的情况下设置JQuery UI datepicker：

<script src="modernizr.js"></script>
<script>Modernizr.load({
  test: Modernizr.inputtypes.date,
  nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],
  complete: function () {
    $('input[type=date]').datepicker({
      dateFormat: 'yy-mm-dd'
    }); 
  }
});
</script>

利用Modernizr检测HTML5功能并提供备用方案

- Maksym Kozlenko

---

我可以使用一些代码片段来实现它，而不是使用Modernizr.js吗？ - GOK

请点击这里查看 http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/。该文章介绍了如何创建一个原生HTML5日期选择器，并提供了一个回退方案使用jQuery UI。 - Maksym Kozlenko

Answer 2

我采用了一种巧妙的方法，将日期字段设置为type="text"，并添加了一个属性data-type="date"

在jquery中，我运行了一段代码来动态替换type="text"和data-type="date"为type="date"。这样浏览器在加载时不会将其作为日期字段，但是因为我动态添加了type="date"，所以可以调用我的jquery ui日期选择器... :)

希望对某人有所帮助..

- GOK

Answer 3

您可以像以下示例中的fiddle一样，只需删除"date"类型并将其切换为"text"： 祝您好运 jsfiddle

removeDefaultDate = function(){
    $('input[type=date]').each(function(){
        this.type="text";
    });
    $('input[type=date]').datepicker({dateFormat: 'yy-mm-dd'});
}

- Joe Naber

---

这个完美地工作，即使是带有日期dd.mm.yyyy的占位符，在本地日历不触发的情况下仍然保持显示。 - Sergey Khmelevskoy

Answer 4

我曾经遇到过类似的问题。在我的模型/视图模型中，我已将数据类型指定为DataType.Date。当我将其移除后，日期选择器在Chrome中开始工作了。我尝试将数据类型更改为DataType.DateTime并在Chrome中再次尝试。这解决了问题。不确定是否适用于其他人，但这让我头疼了很久，所以这可能会帮助某些人。这适用于使用jqueryUI 1.8.20的MVC4。

- Grayson

---

当然，但是日期和日期时间意思不同，你需要选择语义上正确的那一个。 - Joeri Hendrickx

Answer 5

Google提供了另一种有帮助的解决此冲突的方法，在此帖子底部。

var isDateInputSupported = function(){
  var elem = document.createElement('input');
  elem.setAttribute('type','date');
  elem.value = 'foo';
  return (elem.type == 'date' && elem.value != 'foo');
}

if (!isDateInputSupported())  // or.. !Modernizr.inputtypes.date
  $('input[type="date"]').datepicker();

- Ben Hill

Answer 6

这是我通常使用的。我有几种不同格式的日期选择器，所以我不会将其应用于所有日期输入。但可以根据自己的需要更改选择器。

<script src="{YourPathHere}modernizr.js"></script>
<script>
$(function () {//DOM ready code
    if (!Modernizr.inputtypes.date) {// Check to see if HTML5 is supported to use EF data annotations, if not use jQuery datepicker
                $('.date-picker').datepicker(
                    {
                        showButtonPanel: true,
                        gotoCurrent: true,
                        changeMonth: true,
                        changeYear: true,
                        showAnim: 'slideDown'
                    }
                );
            }
});// END DOM Ready
</script>

- Mike