Chrome浏览器的最新更新（V 20.x）已经打破了我新的内置日期和时间输入型形式之一。 我号召日期字段jQuery UI的日期选择器，并将其用于工作完全之前更新。 更新后，Chrome浏览器重写我的占位符，并呈现了jQuery UI部件无法使用。
我怎么能阻止Chrome与我的输入字段搞乱而不改变其类型的任何想法？
Answer 1:
你有几个不同的选择。
你可以检测用户是通过嗅探用户代理字符串和防止点击事件使用Chrome。
if (navigator.userAgent.indexOf('Chrome') != -1) {
$('input[type=date]').on('click', function(event) {
event.preventDefault();
});
}
用户代理嗅探是一个坏主意 ，但是这会奏效。
在我心中理想的方法是检测浏览器是否支持本地日期选择器，如果它不使用它，如果不使用jQuery UI的。
if (!Modernizr.inputtypes['date']) {
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat: 'yy-mm-dd'
});
}
示例- http://jsfiddle.net/tj_vantoll/8Wn34/
当然，由于Chrome支持原生的日期选择器，用户会看到，而不是jQuery的用户界面的。 但至少你不会有功能性的冲突和UI将是最终用户使用。
这吸引了我，所以我写了一些关于使用jQuery UI的日期选择器旁边的本地控制- http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to- jQuery的UI / 。
编辑
如果你有兴趣，我最近介绍了使用jQuery UI的小部件一起HTML5表单控件的演讲。
- 幻灯片
- 视频
Answer 2:
这对我的作品：
;
(function ($) {
$(document).ready(function (event) {
$(document).on('click input', 'input[type="date"], input[type="text"].date-picker', function (e) {
var $this = $(this);
$this.prop('type', 'text').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
showWeek: true,
firstDay: 1
});
setTimeout(function() {
$this.datepicker('show');
}, 1);
});
});
})(jQuery, jQuery.ui);
Answer 3:
要删除箭头，旋转按钮：
.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
您仍然可以积极按Alt + 向下箭头的日历（在Windows 10选中）。
要禁用，你需要添加一些JavaScript：
dateInput.addEventListener('keydown', function(event) {
if (event.keyIdentifier == "Down") {
event.preventDefault()
}
}, false);
Answer 4:
我完全同意TJ。
如果你做任何形式的编辑，预填充，或日期值的动态设置的，你还需要知道的是13年7月3日的Chrome只是荣誉的ISO标准的日期格式（YYYY-MM-DD ） 。 它会显示日期在本地格式（美国“MM / DD / YY”）的用户，但会忽略不是ISO标准格式的HTML设置的任何值。
在网页加载转换，你可以用TJ的用户代理嗅探器和这样做：
if (navigator.userAgent.indexOf('Chrome/2') != -1) {
$('input[type=date]').each(function(){
var d = trim(this.getAttribute('value'));
if (d){
d = new Date(d);
var dStr = d.toISOString().split('T')[0];
this.value = dStr;
}
});
}
如果，例如，你选择禁用本地日期选择器，并使用jQuery的，你还需要设置日期格式以匹配Chrome的日期字段，否则将不显示输入的jQuery的日期选择器正在发送它：
$('#myDate').datepicker({dateFormat: 'yy-mm-dd'});
这两件事情添加到第一个选项TJ的答案，你有jQuery的日期选择器使用Chrome没有错误！
依托本地datepickers是理想的最佳解决方案。 但是，当你需要的东西，支持黑退房日期，日期范围，或者你只是简单的希望它看起来更漂亮，这将工作。
文章来源: How can I disable the new Chrome HTML5 date input?
