web-dev-qa-db-fra.com

Comment désactiver la nouvelle entrée de date Chrome HTML5?

La mise à jour récente (V 20.x) de Chrome a cassé l'un de mes formulaires avec le nouveau type d'entrée intégré de date et heure. J'appelle datepicker de jQuery UI sur un champ de date et il fonctionnait parfaitement avant la mise à jour. Après la mise à jour, Chrome remplace mon espace réservé et rend le widget jQuery UI inutilisable.

Des idées sur la façon dont je peux empêcher Chrome de gâcher mes champs de saisie sans changer leur type?

jquery-uigoogle-chromedateinputdatepicker
35
Reda Lemeden

Vous avez deux options différentes.

Vous pouvez détecter que l'utilisateur utilise Chrome en détectant la chaîne de l'agent utilisateur et en empêchant les événements de clic.

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

Le sniffing d'agent d'utilisateur est une mauvaise idée , mais cela fonctionnera.

Dans mon esprit, l’approche idéale consiste à détecter si le navigateur prend en charge un datepicker natif, s’il l’utilise, s’il n’utilise pas l’interface utilisateur jQuery.

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

Exemple - http://jsfiddle.net/tj_vantoll/8Wn34/

Bien sûr, étant donné que Chrome prend en charge un sélecteur de date natif, l’utilisateur le verrait au lieu de l’interface utilisateur jQuery. Mais au moins, vous ne rencontreriez pas de conflit de fonctionnalités et l'interface utilisateur serait utilisable par l'utilisateur final.

Cela m'a intrigué et j'ai donc écrit quelque chose sur l'utilisation du datepicker de jQuery UI avec le contrôle natif - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback to-jquery-ui/ .

Modifier

Si cela vous intéresse, j'ai récemment parlé de l'utilisation des widgets de jQuery UI aux côtés des contrôles de formulaire HTML5.

40
TJ VanToll

Cela fonctionne pour moi:

;
(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);
2
Jeff Tian

Тобы удалить кнопки со стрелками et вращением:

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

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

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

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

Je suis complètement d'accord avec TJ.

Si vous modifiez ou modifiez de manière dynamique les valeurs de date, vous devez également savoir que, à compter du 7/3/13 Chrome ne respecte que le format de date standard ISO (aaaa-mm). -dd) . Il affichera les dates à l'utilisateur au format local ('mm/jj/aa' pour les États-Unis), mais ignorera les valeurs définies dans le code HTML qui ne sont pas au format standard ISO.

Pour convertir au chargement de la page, vous pouvez utiliser le renifleur d'agent utilisateur de TJ et procéder ainsi:

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

Si, par exemple, vous décidez de désactiver le datepicker natif et d'utiliser jQuery, vous devez également définir le format de date pour qu'il corresponde au champ de date de Chrome. Sinon, il n'affichera pas l'entrée que l'envoyeur dateQuery l'envoie:

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

Ajoutez ces deux éléments à la première option de la réponse de TJ et vous obtiendrez le datepicker de jQuery fonctionnant dans Chrome sans erreurs!

Compter sur les datepickers natifs est idéalement la meilleure solution. Mais si vous avez besoin de quelque chose qui prenne en charge les dates d'interdiction, les plages de dates, ou que vous vouliez simplement qu'il soit plus joli, cela fonctionnera. 

0
Jon Weers