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

Vous cherchez la BOEW v3.1?

La BOEW v4.0 est maintenant la version courrante. La version de la page actuelle pour la BOEW v3.1 a été déplacée.

Questions ou commentaires?

Objet

Fournir une interface pour sélectionner une date dans un formulaire.

Utilisation

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

Exemple

Exemple

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 YYYY-MM-DD 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
create.wb-cal Avant que l'interface du calendrier devienne visible. Crée l'interface du calendrier.
setFocus.wb-cal Après que l'interface du calendrier soit affiché. Place le focus sur la date dans le champ de saisie, si elle est définie.
hideGoToFrm.wb-cal Avant que l'interface du calendrier soit caché. Cache le formulaire « Aller à » dans l'interface du calendrier.

Code source

Code source

Date de modification :