Html 在 Google Chrome 中禁用本机日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11320615/
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
Disable native datepicker in Google Chrome
提问by Alexandre
Date picker landed on Chrome 20, is there any attribute to disable it? My entire system uses jQuery UI datepicker and it's crossbrowser, so, I want to disable Chrome native datepicker. Is there any tag attribute?
日期选择器登陆 Chrome 20，是否有任何属性可以禁用它？我的整个系统使用 jQuery UI datepicker 并且它是跨浏览器，所以，我想禁用 Chrome 本机日期选择器。有没有标签属性？
回答by Yacine Zalouani
To hide the arrow:
隐藏箭头：
input::-webkit-calendar-picker-indicator{
display: none;
}
And to hide the prompt:
并隐藏提示：
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;
}
回答by rjmunro
If you have misused <input type="date" />you can probably use:
如果您误用了，<input type="date" />您可能可以使用：
$('input[type="date"]').attr('type','text');
after they have loaded to turn them into text inputs. You'll need to attach your custom datepicker first:
在它们加载后将它们转换为文本输入。您需要先附加您的自定义日期选择器：
$('input[type="date"]').datepicker().attr('type','text');
Or you could give them a class:
或者你可以给他们上课：
$('input[type="date"]').addClass('date').attr('type','text');
回答by Jimbo
You could use:
你可以使用：
jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
回答by CodeFinity
With Modernizr (http://modernizr.com/), it can check for that functionality. Then you can tie it to the boolean it returns:
使用 Modernizr ( http://modernizr.com/)，它可以检查该功能。然后你可以将它绑定到它返回的布尔值：
// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) {
$("#opp-date").datepicker();
}
回答by Mantisimo
This worked for me
这对我有用
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
回答by MartijnR
The code above doesn't set the value of the input element nor does it fire a change event. The code below works in Chrome and Firefox (not tested in other browsers):
上面的代码不会设置输入元素的值，也不会触发更改事件。以下代码适用于 Chrome 和 Firefox（未在其他浏览器中测试）：
$('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 is a simple custom String method to pad strings with zeros (required)
pad 是一个简单的自定义 String 方法，用零填充字符串（必需）
回答by ebelendez
I agree with Robertc, the best way is not to use type=date but my JQuery Mobile Datepicker plugin uses it. So I have to make some changes:
我同意 Robertc 的观点，最好的方法不是使用 type=date，而是我的 JQuery Mobile Datepicker 插件使用它。所以我必须做一些改变：
I'm using jquery.ui.datepicker.mobile.js and made this changes:
我正在使用 jquery.ui.datepicker.mobile.js 并进行了以下更改：
From (line 51)
来自（第 51 行）
$( "input[type='date'], input:jqmData(type='date')" ).each(function(){
to
到
$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){
and in the form use, type text and add the var plug:
在表单 use 中，输入 text 并添加 var 插件：
<input type="text" plug="date" name="date" id="date" value="">
回答by Paolo Dona
I use the following (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()
which gets converted to plain javascript:
它被转换为普通的 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);
回答by Cogitator
This worked for me:
这对我有用：
// Hide Chrome datetime picker
$('input[type="datetime-local"]').attr('type', 'text');
// Reset date values
$("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()');
$("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');
Even though the valueof the date fields was still there and correct, it did not display. That's why I reset the date values from my view model.
即使日期字段的值仍然存在并且正确，它也没有显示。这就是为什么我从我的视图模型中重置日期值。
回答by Mathieu Dierckx
For Laravel5 Since one uses
对于 Laravel5 由于使用
{!! Form::input('date', 'date_start', null , ['class' => 'form-control', 'id' => 'date_start', 'name' => 'date_start']) !!}
{！！Form::input('date', 'date_start', null , ['class' => 'form-control', 'id' => 'date_start', 'name' => 'date_start']) !!}
=> Chrome will force its datepicker. => if you take it away with css you will get the usual formatting errors!! (The specified value does not conform to the required format, "yyyy-MM-dd".)
=> Chrome 将强制其日期选择器。=> 如果你用 css 去掉它，你会得到通常的格式错误！！（指定的值不符合要求的格式“yyyy-MM-dd”。）
SOLUTION:
解决方案：
$('input[type="date"]').attr('type','text');
$('input[type="date"]').attr('type','text');
$("#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');
