Comment obtenir HTML 5 type d'entrée= "date" de travail dans Firefox et / ou IE 10

vous pouvez essayer webshims , qui est disponible sur cdn + charge seulement le polyfill, si elle 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" />

dans le cas où la configuration par défaut ne satisfait pas, il ya de nombreuses façons de configurer il. Vous trouverez ici le configurateur de lecteur de données .

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

pour l'activer:

about: config

dom.forme.datetime - > définir à true

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

il y a un moyen simple de se débarrasser de cette restriction en utilisant le composant datePicker fourni par jQuery.

1. Inclure jQuery et jQuery UI bibliothèques (Je suis toujours à l'aide d'un ancien)

   • 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 - Changement de Format de Date si nécessaire.

type="date" n'est pas une spécification à ce point. C'est un concept que Google a inventé et qui est dans leurs spécifications whatwg (pas officiel) et n'est que partiellement supporté par Chrome.

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

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

voici un exemple complet avec la date formatée dans 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 de saisie, Mozilla autorise l'utilisation de pattern, donc vous pouvez au moins obtenir la date de validation 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 fait que Mozilla est en retard sur l'inclusion native.

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

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

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

et votre entrée comme:

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

maintenant, chaque fois que vous avez besoin de sélecteur de date, il suffit d'ajouter la classe. PS je sais, vous devez utiliser le js :(, mais au moins vous êtes fixé pour l'ensemble de votre site. Mes 2 cents...

la dernière version de firefox Le firefox 57(Quantum) prend en charge la date et d'autres fonctionnalités, il a été publié le 14 novembre 2017. Vous pouvez le 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 utilisait un tel format)

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

 $.webshims.activeLang('en');

parfois, vous ne voulez pas utiliser le curseur de données http://jqueryui.com/datepicker / dans votre projet parce que:

• Vous ne voulez pas utiliser jquery
• conflit de versions de jquery dans votre projet
• Choix de l'année n'est pas commode. Par exemple, vous avez besoin de 120 clics sur le bouton prev pour passer à Il ya 10 ans.

S'il vous plaît voir mon navigateur croisé très simple code pour la saisie de la date. Mon code s'applique seulement si votre navigateur ne supporte pas la date type input

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<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 devez utiliser jquery datepicker partout

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

ci-Dessous est 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 pour la date d'entrée de l'utilisateur. Il est très facile à utiliser et il a beaucoup de fonctionnalités que la date D'entrée HTML n'a pas.

Cliquez ici pour copier le code jQuery

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