jquery - Chrome 类型 ="date"和 jquery ui 日期选择器冲突

Question

我有一个 type="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 日期选择器的微调器和箭头。但有一个问题，输入文本框的 placeholder('mm/dd/yyyy') 仍然存在；我的 jquery ui 的日期选择器运行良好，但是当我选择任何日期时，占位符仍然在那里。

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

需要知道如何删除该占位符以设置值；我用于应用程序的日期格式也是 yyyy/mm/dd。

Chrome 版本是:版本 27.0.1448.0

提前致谢!!!

Answer 1

Chrome 27 现在支持日期选择器字段类型(就像 Opera 已经做的那样)

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

以下代码仅在不支持日期字段时设置 JQuery UI 日期选择器:

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

Using Modernizr to detect HTML5 features and provide fallbacks