web-dev-qa-db-fra.com

Comment obtenir HTML 5 input type = "date" dans Firefox et/ou IE dix

Je trouve étrange que input type="date" ne 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 HTML 5 nouveaux types sur un élément d'entrée. Pas surpris que ce ne soit pas pris en charge dans IE10. Donc, ma question est ...

Comment obtenir type="date" sur un élément input fonctionnant sans ajouter, encore un autre fichier .js (à savoir jQueryUI Widget DatePicker) juste pour obtenir un calendrier/une date uniquement pour IE et les navigateurs Firefox? Existe-t-il quelque chose qui puisse être appliqué quelque part (CDN peut-être?) Qui fera fonctionner cette fonctionnalité par défaut dans les navigateurs Firefox et/ou IE? Essayer de cibler IE 8+ Navigateurs et pour Firefox, peu importe, la version la plus récente (28.0) conviendra.

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

html5formsjquery-uiinternet-explorerfirefox
185
Solomon Closson

Vous pouvez essayer (webshims } _, disponible sur cdn + ne charge le polyfill que si cela est 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" />

Si la configuration par défaut ne satisfait pas, il existe plusieurs façons de configurer it. Ici vous trouvez le configurateur datepicker .

Remarque: Bien qu'il puisse y avoir de nouvelles versions de correctifs 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é. 

134
alexander farkas

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

26
Jonathan Vanasse

Il existe un moyen simple de supprimer cette restriction en utilisant le composant datePicker fourni par jQuery.

  1. Inclure les bibliothèques jQuery et jQuery UI (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 - Modifier le format de la date si nécessaire.

20
Dax

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

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

Je ne compterais pas sur 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 principale en est que le navigateur est trop sollicité pour déterminer la meilleure interface utilisateur pour une saisie un peu compliquée. Pensez-y d'un point de vue réactif. Comment l'un des fournisseurs peut-il savoir ce qui fonctionnera le mieux avec votre interface utilisateur, par exemple, une résolution de 400 pixels, 800 pixels et 1200 pixels de large?

17
Chris Love

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" />
9
drooh

Bien que cela ne vous permette pas d’obtenir une interface utilisateur datepicker, Mozilla autorise l’utilisation du motif, vous pouvez donc au moins obtenir une validation de 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 dans le sens où Mozilla est très en retard sur l’inclusion de ce contenu de manière native.

4
ajax1515

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 d'autres questions).

Les identifiants doivent être uniques pour chaque champ. Par conséquent, si vous avez plusieurs champs de date dans votre (vos) formulaire (s), vous pouvez utiliser l'élément class à la place 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 cents ...

3
codeispoetry

La dernière version de firefox, le firefox 57 (Quantum), prend en charge la date et d’autres fonctionnalités qui ont été annoncées le 14 novembre 2017. Vous pouvez le télécharger en cliquant sur ce lien

3
irfandar

Voici la solution appropriée . Vous devriez utiliser jquery datepicker partout

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

Ci-dessous le lien pour obtenir le code complet

https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

0
santosh devnath

Parfois, vous ne voulez pas utiliser Datepicker http://jqueryui.com/datepicker/ dans votre projet parce que:

  • 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 prev pour passer à il y a 10 ans.

S'il vous plaît voir mon code très simple navigateur en travers pour la saisie de la date. Mon code ne s'applique que si votre navigateur n'accepte pas 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>

0
Andrej

Je devais utiliser le plugin bootstrap-datepicker pour que le calendrier fonctionne 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 afin que vous ne dépendiez pas de Bootstrap.

Usage:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});
0
Santiago Trejo

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

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

 $.webshims.activeLang('en');
0
Pavel Niedoba