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

Выбор даты приземлился в Chrome 20, есть ли какой-либо атрибут, чтобы отключить его? Вся моя система использует jQuery UI datepicker и кроссбраузер, поэтому я хочу отключить собственный datepicker Chrome. Есть ли атрибут тега?

Чтобы скрыть стрелку:

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

И чтобы скрыть подсказку:

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

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

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

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

$('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 - это простой настраиваемый метод String для заполнения строк нулями (обязательно)

Я согласен с Робертом, лучший способ - не использовать 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(){

и в форме use введите текст и добавьте var plug:

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

Это сработало для меня:

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

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

Несмотря на то, что значение полей даты все еще было правильным, оно не отображалось. Вот почему я сбрасываю значения даты из моей модели представления.

Это работает для меня:

;
(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, такие как «дата». Если это так, эти элементы управления будут использовать собственное поведение для отображения таких вещей, как указатели даты. Если это не так, вы можете указать, какой сценарий следует использовать для отображения вашего собственного 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 [тип = "дата"]'). 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');