禁用Google Chrome浏览器中的本地日期选择器

Question

在Chrome 20上，日期选择器已经推出了，是否有任何属性可以禁用它？ 我的整个系统使用jQuery UI日期选择器，并且是跨浏览器的，因此我想禁用Chrome本机的日期选择器。是否有任何标签属性可以实现？

- Alexandre

---

可能是如何禁用新Chrome HTML5日期输入？的重复问题。 - Wesley Murch

Answer 1

隐藏箭头的方法是：

input::-webkit-calendar-picker-indicator{
    display: none;
}

而要隐藏提示：

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}

- Yacine Zalouani

---

“-webkit-input-placeholder”不会隐藏“mm/dd/yyyy”的文本，因为它不是占位符，而是原生受控的。 - Justin Bull

还有一个选择器没有添加。参考：https://dev59.com/Xmgu5IYBdhLWcg3wTVc6#11418704 - Justin Bull

据我所知，这在Android Chrome上不起作用 - http://fiddle.jshell.net/RgY3t/138/ - Seb Charrot

Answer 2

如果你误用了 <input type="date" />，你可能可以使用以下内容：

$('input[type="date"]').attr('type','text');

在它们被加载后，将它们转换为文本输入框。你需要先附加你的定制日期选择器：

$('input[type="date"]').datepicker().attr('type','text');

或者你可以给它们一个类：

$('input[type="date"]').addClass('date').attr('type','text');

- rjmunro

---

这是我最喜欢的解决方案。它简单，没有使用特定于浏览器的CSS选择器。在我看来，预期的结果应该是如果启用JavaScript，则禁用原生控件，从而允许自定义日期选择器。但是，如果禁用JavaScript，则原生控件仍然可以正常工作。老实说，这应该是被采纳的答案。 - Justin Bull

@travesty3 这些版本的IE是否支持HTML5日期选择器，还是只能回退到文本？如果不支持，那就无所谓了。 - rjmunro

我不明白为什么在日期字段中使用<input type="date">会被误用？（这是答案的第一句话） - Steve

可以完全不使用日历日期选择器来输入“出生日期”这样的字段，但仍然希望通过浏览器原生验证该字段。 - Duncanmoo

@Duncanmoo 生日有什么特别之处吗？只需要将最大日期设置为今天（如果你希望允许输入新生儿出生当天的日期），或者N年前，其中N是你网站用户的最小年龄。特别是在移动设备上，我宁愿使用浏览器原生的日期选择器来输入我的生日，而不是一些自定义的JS工具。此外，有多少个自定义JS日期选择器实现不支持验证呢？ - rjmunro

Answer 3

你可以使用：

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();

- Jimbo

---

如果您使用的是 jQuery >= 1.7 版本：jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker(); - yorch

这个答案不会删除本地样式。https://dev59.com/Xmgu5IYBdhLWcg3wTVc6#11418704 - Justin Bull

@JustinBull 确实如此，但问题不是关于删除样式而是允许使用jQuery日期选择器，这个答案已经实现了。你有什么想法可以同时移除样式吗？ - Jimbo

Answer 4

这对我有用。

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

- Mantisimo

Answer 5

使用Modernizr (http://modernizr.com/)，它可以检查该功能是否可用。然后您可以将其与其返回的布尔值绑定：

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
    $("#opp-date").datepicker();
}

- CodeFinity

---

当本地日期选择器不可用时，这非常有用，可以退回到jQuery日期选择器。然而，这个问题似乎是关于如何摆脱Chrome的日期选择器，所以我已经给你的答案投了反对票。 - Sam

Answer 6

上述代码不会设置输入元素的值，也不会触发更改事件。下面的代码适用于 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是一个简单的自定义字符串方法，用于在字符串前面填充零（必需）

- MartijnR

Answer 7

我使用以下（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);

- Paolo Dona

Answer 8

我同意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(){

在表单中使用时，输入类型为文本，并添加var插件：

<input type="text" plug="date" name="date" id="date" value="">

- ebelendez

---

如果您想为本地脚本数据添加自定义属性，有效的方法是使用data-* 属性。在这种情况下，将您的属性命名为 data-plug 而不是 plug，这样就确保它永远不会与 HTML6/7/8 等中添加的任何新属性发生冲突。 - robertc

Answer 9

这对我有用：

// Hide Chrome datetime picker
$('input[type="datetime-local"]').attr('type', 'text');

// Reset date values
$("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()');
$("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');

尽管日期字段的值仍然存在且正确，但它没有显示出来。这就是为什么我从我的视图模型中重置了日期值的原因。

- Cogitator

Answer 10

不确定我是否在这里漏了什么诀窍，但是试一下：

我将底层输入字段的类型从日期更改为文本。实际上禁用了原生控件，并允许自定义日期时间选择器正确显示。

<input type="text" id="Demo">

我已经足够开心了

- PowerMan2015