Sélecteur de date

Ce composant permet de produire de façon dynamique une interface de calendrier pour sélectionner une date dans un formulaire.

Aperçu

Chef du projet : Stéphane Bérubé (@berubs)

Objet

L'objet de cette fonctionnalité est de fournir une interface pour sélectionner une date dans un formulaire.

Raison d’être

Cette fonctionnalité offre un autre moyen de sélectionner une date dans un formulaire.

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 : Modifier la valeur de max pour indiquer la date la plus éloignée que peut sélectionner l’utilisateur.
  4. Facultatif : Modifier la valeur de min pour indiquer 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>

Exemple pratique

Exemples

Développement

Le sélecteur de date est dépendent sur le soutien natif pour l'élément input type="date" de HTML5, le correctif de sélecteur de date, et la bibliothèque calendar.

Problèmes connus

Il n’existe actuellement aucun problème connu.

Historique des versions

Pages connexes

Références