Отключить собственный 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(){

до

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