Отключить собственный datepicker в Google Chrome

если вы используете <input type="date" /> вы, вероятно, можете использовать:

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

после того, как они загрузились, чтобы превратить их в текстовые входы. Сначала вам нужно прикрепить пользовательский datepicker:

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

или вы могли бы дать им класс:

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

вы можете использовать:

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

С Modernizr (http://modernizr.com/), он может проверить эту функциональность. Затем вы можете связать его с логическим значением, которое он возвращает:

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

приведенный выше код не устанавливает значение входного элемента и не запускает событие изменения. Приведенный ниже код работает в 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-это простой пользовательский строковый метод для заполнения строк нулями (обязательно)

Я согласен с Robertc, лучший способ-не использовать type=date, но мой плагин jQuery Mobile Datepicker использует его. Поэтому я должен внести некоторые изменения:

Я использую jquery.пользовательский интерфейс.элемент управления datepicker.мобильный.js и сделал эти изменения:

из (строка 51)

$( "input[type='date'], input:jqmData(type='date')" ).each(function(){

to

$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){

и в форме использования введите текст и добавьте вилку 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 HTML5?

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

Я знаю, это старый вопрос, но я только что приземлился здесь ищу информацию об этом, чтобы кто-то другой тоже может.

можно использовать Modernizr чтобы определить, поддерживает ли браузер типы ввода HTML5, например "дата". Если это так, эти элементы управления будут использовать собственное поведение для отображения таких вещей, как datepickers. Если это не так, вы можете указать, какой скрипт следует использовать для отображения вашего собственного datepicker. Хорошо работает для меня!

Я добавил 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.

Для Laravel5 Так как один использует

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

=> Chrome заставит свой datepicker. => если вы уберете его с помощью css, вы получите Обычные ошибки форматирования!! (Указанное значение не соответствует требуемому формату, "гггг-ММ-ДД".)

устранение:

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