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

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

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

在此处输入图像描述

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

提前致谢!!!

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

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

仅当不支持日期字段时,以下代码才设置JQuery UI datepicker:

   

使用Modernizr检测HTML5function并提供回退

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

在jquery中,我正在运行一个代码来动态地将type="textdata-type="date"替换为type="date" ,因此浏览器不会在加载时将其设为日期字段,而是调用我的jquery ui datepicker因为我动态添加它作为type="date" … 🙂

希望它对某人有帮助..

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

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

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

他是我经常使用的。 我有一些不同格式的datepicker我使用,所以我不把它覆盖到所有日期输入。 但是,将选择器更改为最适合您的选择器。