Comment faire fonctionner le type d'entrée HTML 5 = «date» dans Firefox et / ou IE 10

192

Je trouve étrange que ce ne input type="date"soit toujours pas pris en charge dans Firefox après tout ce temps. En fait, je ne pense pas qu'ils aient ajouté beaucoup (le cas échéant) de nouveaux types HTML 5 sur un élément d'entrée. Pas surpris qu'il ne soit pas pris en charge dans IE10. Donc, ma question est ...

Comment faire fonctionner type="date"un inputélément sans ajouter encore un autre fichier .js (à savoir le jQueryUIwidget DatePicker) juste pour obtenir un calendrier / une date pour les navigateurs IE et Firefox uniquement? Y a-t-il quelque chose qui peut être appliqué quelque part (CDN peut-être?) Qui fera fonctionner cette fonctionnalité par défaut dans Firefox et / ou les navigateurs IE ?? Essayer de cibler les navigateurs IE 8+ et pour Firefox n'a pas d'importance, la dernière version (28.0) conviendra.

MISE À JOUR: Firefox 57+ prend en charge le type d'entrée = date

Solomon Closson
la source
29
Cela me semble ridicule que Firefox ne le supporte toujours pas. Je suis passé de Chrome à Firefox aujourd'hui, juste pour une journée / semaine pour voir ce qui se passe ces jours-ci, et cela me donne immédiatement envie de revenir en arrière!
Codemonkey
19
c'est une blague FF pas de date de
souper
6
C'est pourquoi je suis contrarié lorsque les gens disent que Firefox est le meilleur navigateur.
Martin Braun
1
Bien que n'étant pas un polyfill, j'ai fini par utiliser pickaday qui est une librairie js simple sans jquery ou autres dépendances ...
mb21
2
Semble fonctionner par défaut dans Firefox 57. Toujours!
Antoine Pinsard

Réponses:

139

Vous pouvez essayer webshims , qui est disponible sur cdn + charge uniquement le polyfill, si nécessaire.

Voici une démo avec CDN: http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

Au cas où la configuration par défaut ne satisfait pas, il existe de nombreuses façons de la configurer . Ici vous trouvez le configurateur de datepicker .

Remarque: Bien qu'il puisse y avoir de nouvelles versions de correction de bogues pour webshim à l'avenir. Il n'y aura plus de versions majeures. Cela inclut la prise en charge de jQuery 3.0 ou de toute nouvelle fonctionnalité.

Alexandre Farkas
la source
c'est une bonne solution, la configuration est riche, mais je ne trouve pas où définir le format de date comme "AAAA / MM / JJ"
Pavel Niedoba
14
J'obtiens une erreur "l'accès est refusé" lorsque j'essaye d'exécuter ce jsfiddle dans IE 11, et le sélecteur de date ne fonctionne pas.
Shavais
4
Cela ne fonctionne pas sur IE10 ... j'obtiens la même erreur que celle mentionnée par @Shavais ... pour le faire fonctionner, mettez à niveau la version jquery vers 1.11 ou plus .. essayez ce lien
Nitin
2
Malheureusement, le support des webshims pour la prochaine Jquery 3 ne sera pas terminé, comme indiqué sur le site de l'auteur. Cela étant, je me fierais à la bonne et ancienne interface utilisateur de Jquery.
marionmaiden
1
Cela fonctionne certainement dans Firefox. Mais n'a pas fonctionné dans IE
Varuni NR
27

Il est dans Firefox depuis la version 51 (26 janvier 2017), mais il n'est pas (encore) activé par défaut

Pour l'activer:

about: config

dom.forms.datetime -> défini sur true

https://developer.mozilla.org/en-US/Firefox/Experimental_features

Jonathan Vanasse
la source
Content d'ententre ça. Devrait être activé par défaut imo. Mais c'est bon à savoir.
Solomon Closson
Je suis sur FF 64.0.2, mais même si cette option est "true" (activée) elle ne fonctionne pas, la boîte datetime est toujours uniquement du texte. J'ai essayé d'activer le "timepicker" sans succès non plus.
Wasted_Coder
20

Il existe un moyen simple de se débarrasser de cette restriction en utilisant le composant datePicker fourni par jQuery.

  1. Inclure les bibliothèques d'interface utilisateur jQuery et jQuery (j'utilise toujours une ancienne)

    • src = "js / jquery-1.7.2.js"
    • src = "js / jquery-ui-1.7.2.js"
  2. Utilisez le snip suivant

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

Voir jQuery UI DatePicker - Changer le format de date si nécessaire.

Dax
la source
8
OP dit "travailler sans ajouter, encore un autre, fichier .js (à savoir jQueryUI DatePicker Widget)" ... mais cette question est le premier succès de Google, donc votre réponse est encore TRÈS utile même si elle ne répond pas à la question. J'aurais aimé ne pas avoir à me sentir mal d'avoir voté pour votre message maintenant.
phil294
2
Vous devez également inclure le CSS jQuery UI pour afficher correctement le calendrier. <br> <link rel = "stylesheet" href = "// code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
YuAn Shaolin Maculelê Lai
16

Le type = "date" n'est pas une spécification réelle à ce stade. C'est un concept que Google a inventé et qui figure dans leurs spécifications whatwg (non officielles) et n'est que partiellement pris en charge par Chrome.

http://caniuse.com/#search=date

Je ne me fierais pas à ce type d'entrée à ce stade. Ce serait bien d'avoir, mais je ne prévois pas que celui-ci le fasse réellement. La raison n ° 1 est que cela impose trop de charge au navigateur pour déterminer la meilleure interface utilisateur pour une entrée un peu compliquée. Pensez-y d'un point de vue réactif, comment l'un des fournisseurs pourrait-il savoir ce qui fonctionnera le mieux avec votre interface utilisateur, à 400 pixels, 800 pixels et 1200 pixels de large?

Chris Love
la source
138
Je ne suis pas d'accord, les navigateurs devraient être suffisamment intelligents pour comprendre cela. Je suis vraiment fatigué d'utiliser les sélecteurs de dates et de devoir les mettre à jour.
SuperUberDuper
49
Raisonnement étrange. Trop de charge pour les navigateurs, mais pas pour joe web developer?!?
jeroenh
35
Cela fait maintenant partie du brouillon de travail HTML 5: w3.org/html/wg/drafts/html/master
Chris
7
Je suis moi aussi heureux pour chaque nouveau type d'entrée. Ils sont mieux définis et natifs, ce qui signifie généralement rapide.
Tomáš Zato - Réintégrer Monica
5
@MM Merci. HTML 5 a entre-temps été mis à niveau vers une recommandation officielle du W3C. Le nouveau lien est w3.org/TR/2014/REC-html5-20141028/…
Chris
9

Voici un exemple complet avec la date au format AAAA-MM-JJ

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />
bave
la source
1
Est-ce que quelqu'un sait si cela permet également d'ajouter un sélecteur de temps?
drooh
J'ai essayé votre script dans JSFiddle @Drooh mais cela ne fonctionne pas. Chaque fois que je sélectionne une date, elle apparaît pendant une milliseconde dans le champ de saisie, puis disparaît. Quelqu'un peut-il fournir une version de violon fonctionnelle avec une configuration de date jj / mm / aaaa?
Ryan Coolwebs
Notez que depuis août 2016, webshim ne fonctionne pas avec jQuery 3 et lors de mes tests, il ne fonctionne pas non plus avec 2.2.4.
drooh
J'ai trouvé que c'était la meilleure solution jusqu'à ce que Firefox ajoute une date d'entrée stackoverflow.com/questions/2528706
...
4

Bien que cela ne vous permette pas d'obtenir une interface utilisateur de datepicker, Mozilla autorise l'utilisation de pattern, vous pouvez donc au moins obtenir la validation de la date avec quelque chose comme ceci:

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

En fin de compte, je suis d'accord avec @SuperUberDuper en ce que Mozilla est en retard sur l'inclusion de cela de manière native.

ajax1515
la source
1
existe-t-il une version pour le «temps»?
Malcolm Salvador
1
Veuillez développer cet exemple. Est-ce un attribut html pour l'entrée?
Wasted_Coder
3

Ceci est juste une suggestion qui suit la réponse de Dax. (Je le mettrais dans un commentaire à cette réponse, mais je n'ai pas encore assez de réputation pour commenter les autres questions).

Les identifiants doivent être uniques pour chaque champ, donc, si vous avez plusieurs champs de date dans votre formulaire (ou vos formulaires), vous pouvez utiliser l'élément de classe au lieu de l'ID:

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

et votre contribution en tant que:

 <input type="text" class="datepicker" name="your-name" />

Maintenant, chaque fois que vous avez besoin du sélecteur de date, ajoutez simplement cette classe. PS Je sais, vous devez toujours utiliser le js :(, mais au moins vous êtes prêt pour tout votre site. Mes 2 centimes ...

codéispoésie
la source
3

La dernière version de firefox the firefox 57 (Quantum) prend en charge la date et d'autres fonctionnalités depuis sa sortie le 14 novembre 2017. Vous pouvez la télécharger en cliquant sur ce lien

irfandar
la source
0

Merci Alexander, j'ai trouvé un moyen de modifier le format pour en lang. (Je ne savais pas quelle langue utilise ce format)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');
Pavel Niedoba
la source
Je pense que le seul pays «en» qui utilise ce format est le Canada. Dans tous les cas, «en» est ambigu, car il inclut également les États-Unis, qui ont un format de date «spécial» qui lui est propre.
Michael Scheper
Dans mon cas, il s'agit de remplacer le format de date pour tous les paramètres régionaux du client, qui peuvent différer sur les postes de travail clients. Cependant, sur une page particulière, je souhaite utiliser ce format de date (pour des raisons de copier-coller). C'est plus comme un commentaire pour la réponse d'Alexander Farkas, mais je mets une réponse distincte car je ne peux pas coller de code dans un commentaire. J'utilise cela dans un environnement de production depuis plus d'un an.
Pavel Niedoba
Faites attention. Si Webshims s'appuie sur l'interprétation du navigateur des paramètres régionaux, vous pouvez avoir des résultats imprévisibles. «fr» ne signifiera probablement pas le même format sur différentes plates-formes (selon la locale du système) ou même dans différents navigateurs. Il peut être interprété comme `` en-ca '' par un navigateur au Canada (qui est probablement aaaa-mm-jj, mais peut-être pas cohérent) mais `` en-in '' par un navigateur en Inde (qui, comme la plupart des pays du monde , produirait jj-mm-aaaa). Ce n'est pas parce qu'il est dans le code de production qu'il a été correctement testé - beaucoup de bogues i18n existent dans le code de production, même sur les grands sites.
Michael Scheper
La dernière ligne $ .webshims.activeLang ('en'); devrait forcer lang (ou locale) à remplacer les paramètres du navigateur par webshims, de sorte que le format est toujours le même.
Pavel Niedoba
0

Parfois, vous ne souhaitez pas utiliser Datepicker http://jqueryui.com/datepicker/ dans votre projet car:

  • Vous ne voulez pas utiliser jquery
  • Conflit de versions de jquery dans votre projet
  • Le choix de l'année n'est pas pratique. Par exemple, vous avez besoin de 120 clics sur le bouton précédent pour passer à il y a 10 ans.

Veuillez consulter mon code de navigateur croisé très simple pour la saisie de la date. Mon code s'applique uniquement si votre navigateur ne prend pas en charge la saisie du type de date

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov [email protected]">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>

Andrej
la source
3
Ce code échoue complètement. Je ne peux pas saisir une date car le champ est déjà rempli avec "AAAA-MM-JJ" et si j'essaye de l'effacer, il réapparaît.
Stephen R
Veuillez ne pas supprimer les tirets. J'ai testé avec succès dans Windows 10 Google Chrome 52, Firefox 41, Opera 39, Microsoft Edge, IE 11.Veuillez me dire votre appareil, votre système d'exploitation et votre navigateur.
Andrej
En fait, je viens de cliquer sur le lien "Exécuter l'extrait de code" juste en dessous de votre commentaire. Je ne peux pas saisir une date correctement car l'espace réservé "AAAA-MM-JJ" est en concurrence active avec moi plutôt que de disparaître lorsque je commence à taper. J'utilise la dernière version de Firefox sur Windows 10.
Stephen R
1
ne répond pas à la question car viole la condition de ne pas ajouter de fichiers JS externes, et en fait le code lui-même est complètement peu intuitif à utiliser. force le format ISO sur les personnes même si ce n'est pas leur format de date natif, ne peut pas taper une nouvelle date lorsque le masque de saisie réapparaît, ne peut pas sur-taper le masque de saisie car ce n'est pas un masque mais du texte réel dans la zone, doit supprimer le masque comme vous tapez. en tout cas pas mieux qu'une entrée standard avec validation regex
MikeT
-1

Voici la solution parfaite. Vous devez utiliser JQuery datepicker à la date d'entrée de l'utilisateur. Il est très facile à utiliser et possède de nombreuses fonctionnalités que la date d'entrée HTML n'a pas.

Cliquez ici pour copier le code de datepicker JQuery

santosh devnath
la source
-1

J'ai dû utiliser un bootstrap-datepickerplugin pour faire fonctionner le calendrier sur Firefox 55 Portable:

https://bootstrap-datepicker.readthedocs.io/en/latest/

Compatible avec Bootstrap v2 et v3. Il est livré avec une feuille de style autonome pour que vous n'ayez pas à dépendre de Bootstrap.

Usage:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});
Santiago quitte SO
la source
-2
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
WAYSER
la source