Sélecteur de date (correctif pour input type='date', interface du calendrier) - nschonni/wet-boew GitHub Wiki

english

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

Table of Contents Aperçu Objet Justification Mise en œuvre Code d'exemple Exemples Développement Problèmes connus À venir Historique des versions Pages connexes Références

Chef du projet : Stephane Berube (@berubs)

Le but de cette fonctionnalité est de fournir une interface pour sélectionner une date dans un formulaire.

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

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

<div>
  <label for="startdate">Date de début (<abbr title="Les quatres chiffres de l'année">AAAA</abbr>-<abbr title="Les deux chiffres du mois">MM</abbr>-<abbr title="Les deux chiffres du jour">JJ</abbr>):</label>
  <input type="text" id="startdate" name="startdate" min="2008-01-01" max="2009-01-01" />
</div>
<div>
  <label for="enddate">Date de fin (<abbr title="Les quatres chiffres de l'année">YYYY</abbr>-<abbr title="Les deux chiffres du mois">MM</abbr>-<abbr title="Les deux chiffres du jour">DD</abbr>):</label>
  <input type="text" id="enddate" name="enddate" min="2009-01-01" max="2010-01-01" />
</div>

• Exemple

• Exemple en anglais
• Exemple en français

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.

Le code pour le sélecteur de date se trouve à plusieurs endroits dans le répertoire source de la BOEW :

• js/workers/datepicker.js - contient le code JavaScript pour le correctif de sélecteur de date
• js/sass/includes/_datepicker.scss - contient le CSS pour le correctif de sélecteur de date
• js/images/datepicker/ - contient les images CSS pour le correctif de sélecteur de date
• js/dependencies/calendar.js - le fichier script du bibliothèque calendar
• js/sass/includes/_calendar-base.scss - le CSS de base du bibliothèque calendar
• js/sass/includes/_calendar-theme.scss - le CSS de thème du bibiliothèque calendar
• js/images/calendar/ - les images du bibiliothèque calendar

Il n’existe actuellement aucun problème connu.

N'hésitez pas à suggérer des améliorations.

• Datepicker.js
• _datepicker.scss
• Calendar.js
• _calendar-base.scss
• _calendar-theme.scss

• Calendrier d'événements (interface du calendrier)

• Élément input type="date" de HTML5
• WAI-ARIA 1.0 Authoring Practices