92

日期选择器登陆 Chrome 20，是否有任何属性可以禁用它？我的整个系统使用 jQuery UI 日期选择器，它是跨浏览器，所以，我想禁用 Chrome 原生日期选择器。有标签属性吗？

4

13 回答 13

145

要隐藏箭头：

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

并隐藏提示：

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}
于 2012-09-04T16:45:45.123 回答
55

如果您误用了<input type="date" />，您可能会使用：

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

在它们加载后将它们转换为文本输入。您需要先附加您的自定义日期选择器：

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

或者你可以给他们上课：

$('input[type="date"]').addClass('date').attr('type','text');
于 2012-12-07T15:42:58.290 回答
16

你可以使用：

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
于 2012-07-13T12:17:21.300 回答
7

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

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
    $("#opp-date").datepicker();
}
于 2013-04-24T01:55:42.683 回答
7

这对我有用

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
于 2015-06-10T16:19:19.423 回答
2

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

于 2012-07-24T19:08:57.193 回答
1

我同意 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="">
于 2013-02-21T18:35:23.927 回答
1

我使用以下（咖啡脚本）：

$ ->
  # 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);
于 2013-10-26T17:11:53.693 回答
1

这对我有用：

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

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

即使日期字段的值仍然存在并且正确，它也没有显示。这就是我从视图模型中重置日期值的原因。

于 2019-10-22T23:12:24.067 回答
0

这对我有用：

;
(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 HTML5 日期输入？

http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx

于 2014-09-18T10:54:55.450 回答
0

我知道这是一个老问题了，但我只是来到这里寻找有关此的信息，因此其他人也可能会这样做。

您可以使用Modernizr来检测浏览器是否支持 HTML5 输入类型，例如“日期”。如果是这样，这些控件将使用本机行为来显示日期选择器之类的内容。如果没有，您可以指定应该使用什么脚本来显示您自己的日期选择器。对我来说效果很好！

我在页面中添加了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>

这意味着原生的datepicker显示在Chrome中，jquery-ui的显示在IE中。

于 2014-11-07T17:12:04.497 回答
0

对于 Laravel5 自从一个使用

{！！Form::input('date', 'date_start', null , ['class' => 'form-control', 'id' => 'date_start', 'name' => 'date_start']) !!}

=> Chrome 将强制使用它的日期选择器。=>如果你用css把它拿走，你会得到通常的格式错误！！（指定的值不符合要求的格式，“yyyy-MM-dd”。）

解决方案：

$('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');
于 2017-03-24T10:22:16.897 回答
0

在 HTML 中使用道具“min”

    <input type="date" class="form-control" [min]="getDate()">

并在课堂上利用这种乐趣来获得今天的约会。

   getDate(): string {
    return new Date().toISOString().split('T')[0];
   }
于 2021-06-05T15:37:01.350 回答