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查看。如果浏览器支持日期字段，则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>

Using Modernizr to detect HTML5 features and provide fallbacks

Answer 2

我处理得很棘手，我的日期字段为type="text"，我添加了一个属性data-type="date"

在jquery中，我正在运行代码来动态替换type="text＆amp; data-type="date"到type="date"，因此浏览器在加载时不会使其成为日期字段，但我的jquery ui datepicker被调用，因为我将其动态添加为type="date" ...：）< / p>

希望对某人有帮助。

Answer 3

您可以删除"date"的类型并将其切换为"text"，如下所示： 祝你好运 jsfiddle

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

Answer 4

我有类似的问题。在我的模型/ viewmodel中，我已将数据类型指定为DataType.Date 我注意到当我删除这个时，日期选择器开始在Chrome中工作。 我想尝试将数据类型更改为DataType.DateTime并再次尝试使用chrome。这解决了这个问题。不确定这是否适用于其他任何人，但这让我很头疼，所以这可能会帮助别人。 这在MVC4中使用jqueryUI 1.8.20

Answer 5

他是我通常使用的。我使用了一些不同格式的日期选择器，因此我不会将其覆盖到所有日期输入。然而，将选择器更改为最适合您的选择器。

RAW FILE:  File
bundle.js:5293 FILE CONTENT:  undefined

Answer 6

Google在this post的底部提供了另一种解决冲突的方法，我认为这是有帮助的。

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();