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

88

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

Александр
источник

Ответы:

140

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

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

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

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}
Ясин Залуани
источник
3
:: - webkit-input-placeholder не скроет текст «mm / dd / yyyy», потому что это не заполнитель, он изначально контролируется.
Джастин Булл
1
Также вам не хватает селектора. Для справки: stackoverflow.com/a/11418704/229787
Джастин Булл
Насколько я могу судить, это не работает в Android Chrome - fiddle.jshell.net/RgY3t/138
Seb Charrot
54

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

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

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

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

Или вы можете дать им урок:

$('input[type="date"]').addClass('date').attr('type','text');
Rjmunro
источник
5
Мое любимое решение. Он прост и не реализует селекторы CSS для конкретных браузеров. Предполагаемый результат, IMO, должен заключаться в предотвращении использования встроенного элемента управления, если включен JavaScript, что позволяет настраивать выбор даты. Однако, если JavaScript отключен, встроенные элементы управления по-прежнему работают. Честно говоря, это должен быть принятый ответ.
Justin Bull
2
@ travesty3 поддерживают ли эти версии IE датпикеры html5 или просто возвращаются к тексту? Если нет, то это не имеет значения.
rjmunro 01
2
Я не понимаю, почему использование <input type = "date"> для поля даты неправильно? (первое предложение этого ответа)
Стив
3
Совершенно верно не использовать средство выбора даты в календаре для такого поля, как «Дата рождения», но все же нужно, чтобы поле проверялось собственным браузером.
Duncanmoo
1
@Duncanmoo Что особенного в датах рождения? Просто установите максимальное значение сегодня (если вы хотите разрешить вводить детей в день их рождения) или N лет назад, где N - минимальный возраст для пользователей вашего сайта. В частности, на мобильных устройствах я бы предпочел использовать встроенное средство выбора даты в браузере для ввода даты своего рождения, чем какую-нибудь особую JS-функцию. Также сколько существует пользовательских реализаций средства выбора даты JS, которые не поддерживают проверку?
rjmunro
15

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

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
Джимбо
источник
3
если вы используете jQuery> = 1.7:jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
yorch
Этот ответ не удаляет родной стиль. stackoverflow.com/a/11418704/229787
Джастин Булл
4
@JustinBull true, но вопрос был не в удалении стиля, а в том, чтобы вместо этого использовать средство выбора даты jQuery, чего достигает этот ответ. Есть идеи, как можно удалить стиль?
Jimbo
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();
}
CodeFinity
источник
3
Это очень полезно для возврата к jQuery datepicker, когда собственный datepicker недоступен. Однако этот вопрос, похоже, касается избавления от средства выбора даты Chrome, поэтому я отклонил ваш ответ.
Сэм
7

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

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
Mantisimo
источник
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 - это простой настраиваемый метод String для заполнения строк нулями (обязательно)

MartijnR
источник
1

Я согласен с Робертом, лучший способ - не использовать 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="">
Ebelendez
источник
3
Если вы хотите добавить настраиваемые атрибуты для данных локального скрипта, правильным способом является использование data-*атрибутов . В этом случае вызовите свой атрибут data-plugвместо plug, тогда он гарантированно никогда не будет конфликтовать с каким-либо новым атрибутом, добавленным в HTML6 / 7/8 / и т. Д.
robertc
1

Я использую следующее (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);
Паоло Дона
источник
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()');

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

Cogitator
источник
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

Джефф Тиан
источник
0

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

Вы можете использовать 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.

Филип Стратфорд
источник
0

Для 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');
Матье Диркс
источник