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

Ответ 1

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

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

И чтобы скрыть приглашение:

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

Ответ 2

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

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

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

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

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

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

Ответ 3

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

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

Ответ 4

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

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
    $("#opp-date").datepicker();
}

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

и в форме используйте, введите текст и добавьте переменную var:

<input type="text" plug="date" name="date" id="date" value="">

Ответ 8

Я использую следующее (coffeescript):

$ ->
  # disable chrome 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);

Ответ 9

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

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

См. также:

Как отключить новый ввод даты в формате HTML HTML?

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

Ответ 10

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

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

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

Ответ 11

Для Laravel5 Поскольку используется

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

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

РЕШЕНИЕ:

$( 'ввода [тип = "Дата" ]') 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');