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

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

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é.

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

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.

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?

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

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.

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 ...

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

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

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>

Voici la bonne solution. 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

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

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

<!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>