Chrome type="date" 和 jquery ui 日期选择器冲突
Posted
技术标签:
【中文标题】Chrome type="date" 和 jquery ui 日期选择器冲突【英文标题】:Chrome type="date" and jquery ui date picker ***ing 【发布时间】:2013-05-29 05:28:45 【问题描述】:我有一个 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
提前致谢!!!
【问题讨论】:
我在谷歌上搜索过,发现它类似于 Chromium 错误,如果是,那么它解决了吗? 请看这里:***.com/questions/11320615/… 【参考方案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
【讨论】:
我可以使用一些代码 sn-p 来实现它,而不是使用 Modernizr.js 吗?? 查看这里tjvantoll.com/2012/06/30/…【参考方案2】:我以一种棘手的方式处理,我的日期字段为type="text"
,并且我添加了一个属性为data-type="date"
在 jquery 中,我正在运行代码以动态替换 type="text
和 data-type="date"
到 type="date"
,因此浏览器不会使其成为加载日期字段,但我的 jquery ui datepicker 被动态调用将其添加为type="date"
... :)
希望对某人有所帮助..
【讨论】:
【参考方案3】:您可以删除"date"
的类型并将其切换为"text"
,如下面的小提琴所示:
祝你好运
jsfiddle
removeDefaultDate = function()
$('input[type=date]').each(function()
this.type="text";
);
$('input[type=date]').datepicker(dateFormat: 'yy-mm-dd');
【讨论】:
这很好用,即使是日期为 dd.mm.yyyy 的占位符也会在本地日历未触发时继续显示【参考方案4】:我遇到了类似的问题。在我的模型/视图模型中,我将数据类型指定为 DataType.Date 我注意到当我删除它时,日期选择器开始在 Chrome 中工作。 我认为尝试将数据类型更改为 DataType.DateTime 并在 chrome 中再次尝试。这解决了这个问题。不确定这是否适用于其他任何人,但这让我很头疼,所以这可能会对某人有所帮助。 这在使用 jqueryUI 1.8.20 的 MVC4 中有效
【讨论】:
当然可以,但是日期和日期时间的含义不同,您要选择语义正确的那个。【参考方案5】: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();
【讨论】:
【参考方案6】:他是我通常使用的。我使用了几种不同格式的日期选择器,因此我不会将其覆盖到所有日期输入。但是,将选择器更改为最适合您的选择器。
<script src="YourPathHeremodernizr.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>
【讨论】:
以上是关于Chrome type="date" 和 jquery ui 日期选择器冲突的主要内容,如果未能解决你的问题,请参考以下文章
在iPhone手机上写了input type="date" 显示不出来的原因
选择日期后如何在 html 5 [input type="date"] 中删除 X 标记(清除按钮)