Как отключить новый ввод даты в Chrome HTML5?

Ответ 1

У вас есть несколько различных вариантов.

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

if (navigator.userAgent.indexOf('Chrome') != -1) {
    $('input[type=date]').on('click', function(event) {
        event.preventDefault();
    });
}

Обманщик агента пользователя - плохая идея, но это будет работать.

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

if (!Modernizr.inputtypes['date']) {
    $('input[type=date]').datepicker({
        // Consistent format with the HTML5 picker
        dateFormat: 'yy-mm-dd'
    });   
}​

Пример - http://jsfiddle.net/tj_vantoll/8Wn34/

Конечно, поскольку Chrome поддерживает собственный выбор даты, пользователь увидит это вместо пользовательского интерфейса jQuery. Но по крайней мере у вас не было бы столкновения функциональности, и пользовательский интерфейс был бы полезен для конечного пользователя.

Это заинтриговало меня, поэтому я написал кое-что об использовании jQuery UI datepicker наряду с собственным контролем - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.

Edit

Если вам интересно, я недавно поговорил об использовании виджетов jQuery UI вместе с элементами управления HTML5.

• Slides
• Видео

Ответ 2

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

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

Ответ 3

Я полностью согласен с TJ.

Если вы выполняете какое-либо редактирование, предварительное заполнение или динамическую настройку значений даты, вам также нужно знать, что с 7/3/13 Chrome только соблюдает стандартный формат даты ISO (yyyy-mm-dd). Он отобразит даты для пользователя в локальном формате ( "мм/дд/гг" для США), но будет игнорировать любые значения, установленные в HTML, которые не соответствуют стандарту ISO.

Чтобы преобразовать на загрузку страницы, вы можете использовать сниффер пользователя пользовательского интерфейса TJ и сделать это:

if (navigator.userAgent.indexOf('Chrome/2') != -1) {
    $('input[type=date]').each(function(){
        var d = trim(this.getAttribute('value'));
        if (d){
            d = new Date(d);
            var dStr = d.toISOString().split('T')[0];
            this.value = dStr; 
        }
    });
}

Если, например, вы выбираете отключить родной datepicker и используете jQuery, вам также нужно будет установить формат даты в соответствии с полем даты Chrome или не будет отображать ввод, который отправляет датпикер jQuery

$('#myDate').datepicker({dateFormat: 'yy-mm-dd'});

Добавьте эти две вещи в первый вариант ответа TJ, и у вас есть jQuery datepicker, работающий в Chrome без ошибок!

Опираясь на родные датпикеры - идеальное решение. Но когда вам нужно что-то, что поддерживает даты вычеркивания, диапазоны дат, или вы просто хотите, чтобы он выглядел красивее, это сработает.

Ответ 4

Чтобы удалить стрелки и кнопки со стрелками:

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

Вы можете активировать календарь, нажав Alt + Down Arrow (отмечен на окнах 10).

Чтобы отключить, вам нужно добавить немного JavaScript:

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);