在谷歌浏览器中禁用本机datepicker-DisablenativedatepickerinGoogleChrome

124  

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;
}

44  

If you have misused you can probably use:

如果您误用了，您可以使用:

$('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');

15  

You could use:

您可以使用:

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

7  

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();
}

4  

This worked for me

这为我工作

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

2  

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是一个简单的自定义字符串方法，可以用0 (required)填充字符串

1  

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移动Datepicker插件使用它。所以我必须做出一些改变

I'm using jquery.ui.datepicker.mobile.js and made this changes:

我用jquery.ui.datepicker.mobile。并做了如下修改:

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:

在表单使用中，输入文本并添加var plug:

1  

I use the following (coffeescript):

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

0  

This works for me:

这工作对我来说:

;
(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);

See also:

参见:

How can I disable the new Chrome HTML5 date input?

如何禁用新的Chrome HTML5日期输入?

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

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

0  

I know this is an old question now, but I just landed here looking for information about this so somebody else might too.

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

You can use Modernizr to detect whether the browser supports HTML5 input types, like 'date'. If it does, those controls will use the native behaviour to display things like datepickers. If it doesn't, you can specify what script should be used to display your own datepicker. Works well for me!

您可以使用Modernizr来检测浏览器是否支持HTML5输入类型，比如'date'。如果是的话，这些控件将使用本机行为来显示数据表之类的东西。如果没有，可以指定应该使用哪个脚本显示自己的datepicker。适用于我!

I added jquery-ui and Modernizr to my page, then added this code:

我在页面中添加了jquery-ui和Modernizr，然后添加了以下代码:

This means that the native datepicker is displayed in Chrome, and the jquery-ui one is displayed in IE.

这意味着本地datepicker会在Chrome中显示，而jquery-ui则会在IE中显示。

0  

For Laravel5 Since one uses

对于Laravel5，因为有一个词

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

{ ! !形式::输入(‘日期’,‘date_start’,null,[“类”= >“表单控件”,“id”= >“date_start”,'名字' = > ' 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将强制其datepicker。=>如果你用css把它去掉，你会得到通常的格式错误!(指定的值不符合所要求的格式，“yyyy-MM-dd”)。

SOLUTION:

解决方案:

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

$('输入(type = "日期")).attr(“类型”、“文本”);

$("#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');