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

Question

我有一个输入框,其类型为"日期",在IE中一切正常,但在最新版本的Chrome中,它带有一个微调器,向下箭头和占位符为mm/dd/yyyy.

在Chrome中,点击该字段Chrome会打开一个日期选择器,我已经为我的应用程序使用映射了jquery ui的datepicker.这两者都在冲突,如下所示:

我已经应用了如下修复:

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版本为:版本27.0.1448.0

提前致谢!!!

Answer 1

Chrome 27现在支持datepicker字段类型(就像Opera已经做的那样)

如果支持日期字段,您可以使用modernizr.js进行检查.如果浏览器支持date字段,则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功能并提供回退

Answer 2

我以一种棘手的方式处理,我有我的日期字段type="text",我添加了一个属性data-type="date"

jQuery中,我正在运行的代码动态替换type="text及data-type="date"到type="date"的,所以浏览器不使它成为一个日期字段上的负载,但是我的jQuery UI的日期选择器被称为我动态将其添加为type="date"... :)

希望它对某人有帮助..

Answer 3

您可以删除以下类型的小提琴"date"并将其切换为"text"类似：祝您好运 jsfiddle

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