如何禁用新的Chrome浏览器HTML5dateinput？
Chrome的最新更新（V 20.x）已经打破了我的一个新的内置date和时间inputtypes的forms。 我在date字段上调用jQuery UIdateselect器，并在更新之前完美地工作。 更新之后，Chrome覆盖了我的占位符，并呈现jQuery UI小部件不可用。
任何想法如何防止Chrome搞乱我的input字段而不改变他们的types？
你有几个不同的select。
您可以通过嗅探用户代理string并防止点击事件来检测到用户正在使用Chrome。
if (navigator.userAgent.indexOf('Chrome') != -1) { $('input[type=date]').on('click', function(event) { event.preventDefault(); }); } 用户代理嗅探是一个坏主意 ，但是这将工作。
我脑海中的理想方法是检测浏览器是否支持本机dateselect器，如果它使用它，如果不使用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支持本地dateselect器，用户会看到，而不是jQuery UI。 但至less你不会有function的冲突，用户界面将可用于最终用户。
这引起了我的兴趣，所以我写了一些关于使用jQuery UI的datepicker与本地控制一起 – http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to- jquery-ui / 。
编辑
如果您有兴趣，我最近谈了一下使用jQuery UI的widgets和HTML5表单控件。
- 幻灯片
- video
这适用于我：
; (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);
我完全同意TJ。
如果您正在进行任何types的编辑，预填充或dynamic设置date值，则还需要知道，自7/3/13起， Chrome只支持ISO标准date格式（yyyy-mm-dd ） 。 它会以本地格式（美国的“mm / dd / yy”）向用户显示date，但会忽略HTML中设置的任何非ISO标准格式的值。
要在页面加载时转换，可以使用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; } }); }
例如，如果您select禁用本机dateselect器并使用jQuery，则还需要设置date格式以匹配Chrome的date字段，否则将不会显示jQuerydateselect器发送的date格式：
$('#myDate').datepicker({dateFormat: 'yy-mm-dd'});
把这两个东西添加到TJ答案的第一个选项，你有没有错误的jQuery的dateselect器在Chrome中工作！
依靠本地dateselect器是理想的最佳解决scheme。 但是当你需要一些支持date范围的date范围，或者你只是想让它看起来更漂亮时，这个就行了。
要删除箭头和旋转button：
.unstyled::-webkit-inner-spin-button, .unstyled::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
您仍然可以通过按Alt + 向下箭头 （在窗口10上选中）来激活日历。
要禁用，您需要添加一点JavaScript：
dateInput.addEventListener('keydown', function(event) { if (event.keyIdentifier == "Down") { event.preventDefault() } }, false);
