Correctif « input type="date" » (sélecteur de date)

Questions ou commentaires?

Objet

Fournir une interface pour sélectionner une date dans un formulaire. Met en œuvre le modèle de conception « Date Picker » de WAI-ARIA (anglais seulement).

Utilisation

Cette fonctionnalité peut être utilisée sur n'importe quelle page où sélectionner une date dans un formulaire est requis.

Exemple pratique

Mise en œuvre

  1. Ajouter un champ de saisie de texte pour chaque date qui sera demandée. Chaque champ de saisie de texte doit implémenter le type date.
  2. Facultatif : Enrouler le format de date avec <span class="datepicker-format"></span> pour le cacher lorsque le correctif ne charge (à cause du soutien natif).
  3. Facultatif : Ajouter l'attribut max indiquant la date la plus éloignée que peut sélectionner l'utilisateur.
  4. Facultatif : Ajouter l'attribut min indiquant la date la plus proche que peut sélectionner l'utilisateur.

Code d'exemple

<div>
	<label for="startdate">Date de début<span class="datepicker-format"> (<abbr title="Les quatres chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span> :</label>
	<input type="date" id="startdate" name="startdate" min="2013-03-27" max="2013-05-07" />
</div>
<div>
	<label for="enddate">Date de fin<span class="datepicker-format"> (<abbr title="Les quatres chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span> :</label>
	<input type="date" id="enddate" name="enddate" min="2013-03-27" max="2016-05-07" />
</div>

Options de configuration

Option Description Configuration Exemple
Cacher le format de la date Cacher le format de la date lorsque le correctif ne charge pas (à cause du soutien natif). Enrouler le format de date avec :
<span class="datepicker-format"></span>
 
<label for="startdate">Date de début<span class="datepicker-format"> (<abbr title="Les quatres chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr>)</span>
Date min La date la plus proche que peut sélectionner l'utilisateur. Ajouter l'attribut « min » avec une date en format AAAA-MM-JJ pour indiquer la date la plus proche que peut sélectionner l'utilisateur. 
<input type="date" id="startdate" name="startdate" min="2013-03-27" />
Date max La date la plus éloignée que peut sélectionner l’utilisateur. Ajouter l'attribut « max » avec une date en format AAAA-MM-JJ pour indiquer la date la plus éloignée que peut sélectionner l'utilisateur. 
<input type="date" id="startdate" name="startdate" max="2013-05-07" />

Événements

Événement Déclencheur Fonction
wb-init.wb-date Triggered manually (e.g., $( "input[type=date]" ).trigger( "wb-init.wb-date" );). Used to manually initialize the input type="date" polyfill. Note: The input type="date" polyfill will be initialized automatically unless the input type="date" element is added after the page has already loaded.
wb-ready.wb-date (v4.0.5+) Triggered automatically after the input type="date" polyfill initializes. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native input type="date" support. Used to identify where the input type="date" polyfill initialized (target of the event) 
$( document ).on( "wb-ready.wb-date", "input[type=date]", function( event ) {
});
$( "input[type=date]" ).on( "wb-ready.wb-date", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Code source

Code source pour le orrectif « input type="date" » (sélecteur de date)

Date de modification :