Chrome type="date" 和 jquery ui 日期选择器冲突
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16890376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome type="date" and jquery ui date picker clashing
提问by GOK
I have a input box having type="date", everything works fine in IE but in latest version of Chrome it comes with a spinner, Down arrow and with a placeholder of mm/dd/yyyy.
我有一个 type="date" 的输入框，在 IE 中一切正常，但在最新版本的 Chrome 中，它带有一个微调器、向下箭头和一个占位符 mm/dd/yyyy。
In Chrome, on click of that field Chrome opens a datepicker and i have mapped jquery ui's datepicker for my application use. This both are clashing on them as shown below:
在 Chrome 中，点击该字段 Chrome 会打开一个日期选择器，我已经映射了 jquery ui 的日期选择器供我的应用程序使用。这两者在他们身上发生冲突，如下所示：
I have applied a fix as below:
我已经应用了如下修复：
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 **/
After adding the above code, it looks like wise:
添加上面的代码后，看起来很明智：
The code above hides the spinner and arrow which fires the Chrome's date picker. But there is a problem, placeholder('mm/dd/yyyy') is still in there for the input textbox; my jquery ui's date picker is coming up fine but when i select any dates, the placeholder is still in there.
上面的代码隐藏了触发 Chrome 日期选择器的微调器和箭头。但是有一个问题，placeholder('mm/dd/yyyy') 仍然在那里用于输入文本框；我的 jquery ui 的日期选择器运行良好，但是当我选择任何日期时，占位符仍在那里。
No value is setting in that input box.
该输入框中未设置任何值。
Need to know how to remove that placeholder for setting the value; also the date format i am using for the application is yyyy/mm/dd.
需要知道如何删除该占位符以设置值；我用于应用程序的日期格式也是 yyyy/mm/dd。
Chrome version is : Version 27.0.1448.0
Chrome 版本是：版本 27.0.1448.0
Thanks in advance!!!
提前致谢！！！
采纳答案by GOK
I handled in a tricky way, i have my date field as type="text"and i have added an attribute as data-type="date"
我以一种棘手的方式处理，我有我的日期字段type="text"，我已经添加了一个属性data-type="date"
In jquery, i am running a code to dynamically replace type="text& data-type="date"to type="date", so the browser doesn't make it a date field on load but my jquery ui datepicker is called as i am dynamically adding it as type="date"... :)
在 jquery 中，我正在运行一个代码来动态替换type="text& data-type="date"to type="date"，因此浏览器不会在加载时将其设置为日期字段，但是我的 jquery ui datepicker 被调用，因为我正在将其动态添加为type="date"... :)
Hope it is helpful to someone..
希望它对某人有帮助..
回答by Maksym Kozlenko
Chrome 27 now supports datepicker field types (Just like Opera already does)
Chrome 27 现在支持 datepicker 字段类型（就像 Opera 已经做的那样）
You can check with modernizr.js if date field is supported. Modernizr.inputtypes.date returns true if date field is supported by browser.
您可以使用 Modernizr.js 检查是否支持日期字段。如果浏览器支持日期字段，Modernizr.inputtypes.date 返回 true。
The following code sets JQuery UI datepicker only if date field is not supported:
以下代码仅在不支持日期字段时设置 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
回答by Joe Nabeezy
You can just remove the type of "date"and switch it to "text"like in the following fiddle:
best of luck
jsfiddle
您可以在以下小提琴中删除类型"date"并将其切换为"text"喜欢：祝你好运
jsfiddle
removeDefaultDate = function(){
$('input[type=date]').each(function(){
this.type="text";
});
$('input[type=date]').datepicker({dateFormat: 'yy-mm-dd'});
}
回答by Grayson
I had a similar problem. In my model/viewmodel I had specified the data type as DataType.Date I noticed when I removed this the date picker started working in Chrome. I think tried change the data type as DataType.DateTime and tried again in chrome. This resolved the issue. Not sure if this applies to anyone else but this caused me lots of headache so this might help someone. This worked in MVC4 using jqueryUI 1.8.20
我有一个类似的问题。在我的模型/视图模型中，我将数据类型指定为 DataType.Date 我注意到当我删除它时日期选择器开始在 Chrome 中工作。我想尝试将数据类型更改为 DataType.DateTime 并在 chrome 中再次尝试。这解决了问题。不确定这是否适用于其他任何人，但这让我很头疼，所以这可能对某人有所帮助。这在 MVC4 中使用 jqueryUI 1.8.20
回答by Ben Hill
Google offered another way to resolve this conflict that I found helpful, at the bottom of this post.
在这篇文章的底部，Google 提供了另一种解决此冲突的方法，我认为这很有帮助。
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();
回答by Mike
He is what i usually use. I have a few different formats of the datepicker i use, so I don't blanket it to all date inputs. However changing the selector to what works best for you.
他是我经常使用的。我使用的日期选择器有几种不同的格式，因此我不会将其覆盖到所有日期输入。但是，将选择器更改为最适合您的方式。
<script src="{YourPathHere}modernizr.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>
