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

Question

La récente mise à jour (V 20.x) de Chrome a cassé l'un de mes formulaires avec le nouveau type d'entrée intégré de la date et de l'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 manière dont je peux empêcher Chrome de gâcher mes champs de saisie sans changer leur type?

Answer 1

Vous avez un couple de différentes options.

Vous pourriez détecter que l'utilisateur est à l'aide de Chrome en sniffant de la chaîne de l'agent utilisateur et de prévention sur les événements.

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

Utilisateur agent sniffing est une mauvaise idée, mais cela fonctionne.

L'approche idéale dans mon esprit est de détecter si le navigateur prend en charge native datepicker, si elle ne l'utiliser, si ce n'est l'utilisation de jQuery UI.

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, depuis Chrome prend en charge native de sélecteur de date l'utilisateur de voir qu'au lieu de jQuery UI. Mais au moins, vous n'auriez pas un choc des fonctionnalités et de l'INTERFACE utilisateur serait utilisable pour l'utilisateur final.

Ce qui m'a intrigué alors j'ai écrit quelque chose sur l'utilisation de jQuery UI datepicker à côté de la native de contrôle - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.

Modifier

Si vous êtes intéressé, j'ai récemment donné une conférence sur l'utilisation de jQuery UI widgets aux côtés de HTML5 contrôles de formulaire.

• Les diapositives
• Vidéo

Answer 2

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

Answer 3

Je suis complètement d'accord avec TJ.

Si vous êtes en train de faire toute sorte de l'édition, de pré-remplissage, ou de la dynamique des valeurs de date, vous aurez également besoin de savoir que tant de 7/3/13 Chrome uniquement les honneurs de la norme ISO format de la date (aaaa-mm-jj). Il affiche les dates de l'utilisateur au format local ("mm/dd/yy" pour les etats-unis), mais ignore toutes les valeurs définies dans le code HTML qui ne sont pas de format standard ISO.

Pour convertir au chargement de la page, vous pouvez utiliser TJ de l'utilisateur de l'agent sniffer et de faire cela:

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

Si, par exemple, vous optez pour désactiver le natif datepicker et l'utilisation de jQuery, vous devez également définir le format de date pour le match de google Chrome champ de date, ou il n'affiche pas l'entrée à laquelle le datepicker de jQuery est de l'envoyer:

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

Ajouter ces deux choses à la première option dans TJ réponse et vous avez datepicker de jQuery travail en Chrome sans erreurs!

En s'appuyant sur les indigènes datepickers est idéalement la meilleure solution. Mais lorsque vous besoin de quelque chose qui soutient le black-out dates, les plages de date ou vous avez tout simplement voulez qu'il soit plus beau, cela fonctionnera.