在Google Chrome中停用本机dateselect器
dateselect器登陆Chrome 20，有没有任何属性来禁用它？ 我的整个系统使用jQuery UIdateselect器，它是交叉浏览器，所以，我想禁用Chrome本机dateselect器。 有没有标签属性？
要隐藏箭头：
input::-webkit-calendar-picker-indicator{ display: none; } 并隐藏提示：
input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important; }
如果您误用了<input type="date" /> ，则可以使用：
$('input[type="date"]').attr('type','text');
在他们加载之后把它们变成文本input。 您需要先附加您的自定义dateselect器：
$('input[type="date"]').datepicker().attr('type','text');
或者你可以给他们一个class级：
$('input[type="date"]').addClass('date').attr('type','text');
你可以使用：
jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
使用Modernizr（ http://modernizr.com/ ），它可以检查该function。 那么你可以把它绑定到它返回的布尔值：
// does not trigger in Chrome, as the date Modernizr detects the date functionality. if (!Modernizr.inputtypes.date) { $("#opp-date").datepicker(); }
这对我有效
input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
上面的代码不会设置input元素的值，也不会触发更改事件。 以下代码适用于Chrome和Firefox（未在其他浏览器中testing过）：
$('input[type="date"]').click(function(e){ e.preventDefault(); }).datepicker({ onSelect: function(dateText){ var d = new Date(dateText), dv = d.getFullYear().toString().pad(4)+'-'+(d.getMonth()+1).toString().pad(2)+'-'+d.getDate().toString().pad(2); $(this).val(dv).trigger('change'); } });
pad是一个简单的自定义string方法来填充零string（必需）
我同意Robertc，最好的方法是不使用type = date，但我的JQuery Mobile Datepicker插件使用它。 所以我必须做一些改变：
我正在使用jquery.ui.datepicker.mobile.js并作出这样的更改：
从（第51行）
$( "input[type='date'], input:jqmData(type='date')" ).each(function(){
至
$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){
并在表单中使用，input文本并添加var插件：
<input type="text" plug="date" name="date" id="date" value="">
我使用以下（coffeescript）：
$ -> # disable chrome's html5 datepicker for datefield in $('input[data-datepicker=true]') $(datefield).attr('type', 'text') # enable custom datepicker $('input[data-datepicker=true]').datepicker()
它被转换为纯javascript：
(function() { $(function() { var datefield, _i, _len, _ref; _ref = $('input[data-datepicker=true]'); for (_i = 0, _len = _ref.length; _i < _len; _i++) { datefield = _ref[_i]; $(datefield).attr('type', 'text'); } return $('input[data-datepicker=true]').datepicker(); }); }).call(this);
这适用于我：
; (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);
也可以看看：
如何禁用新的Chrome浏览器HTML5dateinput？
http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx
我知道这是一个古老的问题，但我只是在这里登陆寻找这个信息，所以别人也可能。
您可以使用Modernizr来检测浏览器是否支持HTML5inputtypes，如“date”。 如果是这样，这些控件将使用本机行为来显示诸如datepickers之类的东西。 如果没有，你可以指定什么脚本应该用来显示你自己的dateselect器。 适合我！
我添加jquery-ui和Modernizr到我的页面，然后添加这个代码：
<script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initDateControls); initDateControls(); function initDateControls() { //Adds a datepicker to inputs with a type of 'date' when the browser doesn't support that HTML5 tag (type=date)' Modernizr.load({ test: Modernizr.inputtypes.datetime, nope: "scripts/jquery-ui.min.js", callback: function () { $("input[type=date]").datepicker({ dateFormat: "dd-mm-yy" }); } }); } </script>
这意味着在Chrome中显示本机dateselect器，并在IE中显示jquery-ui。
对于Laravel5由于使用
{！ Form :: input（'date'，'date_start'，null，['class'=>'form-control'，'id'=>'date_start'，'name'=>'date_start']）
=> Chrome会强制使用datepicker。 =>如果你把它拿走与CSS你会得到通常的格式错误！ （指定的值不符合要求的格式，“yyyy-MM-dd”。）
解：
$（ 'input[types= “date”]'）ATTR（ 'types'， '文本'）。
$("#date_start").datepicker({ autoclose: true, todayHighlight: true, dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, viewMode: 'months' }); $("#date_stop").datepicker({ autoclose: true, todayHighlight: true, dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, viewMode: 'months' }); $( "#date_start" ).datepicker().datepicker("setDate", "1d"); $( "#date_stop" ).datepicker().datepicker("setDate", '2d');
