web-dev-qa-db-fra.com

Le type d’entrée HTML 5 = "date" ne fonctionne pas dans Firefox

J'utilise HTML5 <input type="date" />, ce qui fonctionne bien dans Chrome et je reçois le calendrier contextuel pour sélectionner la date. 

Mais dans Firefox, il s’agit d’une zone de texte et aucun calendrier ne s’affiche. 

Après quelques recherches, je ne vois que peu de solutions utilisant webshims, modenizr, etc., mais je ne souhaite pas utiliser jQuery. 

Y a-t-il une alternative pour cela? Comment puis-je le faire fonctionner dans Firefox?

javascripthtmlhtml5firefoxfeature-detection
16
Aditi

EDIT: à partir de Firefox 57, <input type="date"/> est partiellement pris en charge .

Firefox ne prend pas en charge le <input type="date"/> de HTML5.

Vous avez deux options: 

  • utilisez toujours un sélecteur de date et d’heure Javascript, ou 
  • vérifie si le navigateur prend en charge cette balise, si oui, si non, se replie sur un datepicker javascript (jQuery ou un autre). 

C'est ce qu'on appelle Détection des fonctionnalités , et Modernizr est la bibliothèque la plus populaire pour cela. 

Utiliser toujours un datepicker javascript est plus facile et plus rapide, mais cela ne fonctionnera pas si javascript est désactivé (ce qui importe), cela fonctionnera très mal sur le mobile (c'est important) et cela sentira le vieux.

L’utilisation de l’approche hybride vous permettra de couvrir chaque cas maintenant, jusqu’au jour où tous les navigateurs prendront en charge le datepicker HTML5, d’une manière normalisée et sans avoir recours à javascript. Il est à l'épreuve du temps, et ceci est particulièrement important pour la navigation mobile , où les datepickers javascript sont presque inutilisables.

Ceci est un exemple pour lancer cela sur chaque élément <input type="date"/> de chaque page automatiquement:

<script>
    $(function(){           
        if (!Modernizr.inputtypes.date) {
        // If not native HTML5 support, fallback to jQuery datePicker
            $('input[type=date]').datepicker({
                // Consistent format with the HTML5 picker
                    dateFormat : 'yy-mm-dd'
                },
                // Localization
                $.datepicker.regional['it']
            );
        }
    });
</script>

Il utilise jQuery parce que j'utilise jQuery, mais vous êtes libre de substituer les parties jQuery par javascript Vanilla et la partie datepicker par un datepicker javascript de votre choix.

23
Andrea Ligios

Cela fonctionne maintenant. Depuis Firefox 53, vous pouvez l'activer dans about:config en activant l'option dom.forms.datetype. Voir http://caniuse.com/#feat=input-datetime et https://developer.mozilla.org/en-US/Firefox/Experimental_features

3
Massimiliano Arione

J'utilise 6 zones de sélection HTML, pour les différents éléments, avec des instructions OPTION pour les valeurs appropriées:

année 2000-2050 (ou toute autre plage de votre choix) mois 1-12 (vous pouvez l’indiquer avec les noms des mois) jour 1-31 heure 0-23 (ou utilisez 12 h 00 à 23 h, cela change simplement l'affichage) minute 0-59 seconde 0-59 (ou supposons simplement 0)

Pas de Javascript nécessaire, bien que j'en utilise certains pour éviter les sélections invalides (comme le 30 février). Ceci est déclenché lors du changement de mois ou d'année.

1
Mark Lloyd
`input type="date"` is not supported on mozilla

vérifier le link pour la liste des événements supportés

1
Visakh B Sujathan