Sélecteur de date

Champ de saisie de date avec calendrier intégré, adapté au format administratif jj/mm/aaaa. Émet l’événement bj:datepicker.

Exemple

<div class="bj-datepicker" data-bj-datepicker>
  <div class="bj-datepicker__field">
    <input type="text" class="bj-datepicker__input" placeholder="jj/mm/aaaa" />
    <button type="button" class="bj-datepicker__trigger" aria-label="Ouvrir le calendrier">
      <i class="ri-calendar-line" aria-hidden="true"></i>
    </button>
  </div>
</div>

Libellé, aide et placeholder

Comme dans le composant Vue, placez bj-label et bj-hint dans le conteneur bj-datepicker. Le placeholder du champ est l’attribut placeholder de bj-datepicker__input (ex. JJ/MM/AAAA, MM/AAAA, AAAA selon le mode).

Date de naissanceFormat JJ/MM/AAAA

<div class="bj-datepicker">
  <label class="bj-label" for="dp1">Date de naissance</label>
  <span id="dp1-h" class="bj-hint">Format JJ/MM/AAAA</span>
  <div class="bj-datepicker__field">
    <input id="dp1" class="bj-datepicker__input" type="text" readonly placeholder="JJ/MM/AAAA" aria-describedby="dp1-h" />
    <button type="button" class="bj-datepicker__trigger" aria-label="Ouvrir le calendrier">…</button>
  </div>
</div>

Taille compacte

Ajoutez bj-datepicker--sm sur le conteneur pour réduire champ et calendrier.

Champ désactivé

Attribut disabled sur bj-datepicker__input et sur bj-datepicker__trigger.

Avec bornes min/max

<div class="bj-datepicker" data-bj-datepicker
     data-bj-datepicker-min="01/01/2024"
     data-bj-datepicker-max="31/12/2026">
  <div class="bj-datepicker__field">…</div>
</div>

Calendrier ouvert (grille des jours)

Affichez le panneau avec data-bj-expanded sur bj-datepicker__calendar. Classes de cellule : bj-datepicker__day--outside, bj-datepicker__day--today, bj-datepicker__day--selected ; jours hors plage : disabled sur le button.

<div class="bj-datepicker__calendar" data-bj-expanded role="dialog" aria-label="Calendrier">
  <div class="bj-datepicker__nav">…</div>
  <div class="bj-datepicker__weekdays">…</div>
  <div class="bj-datepicker__grid" role="grid">
    <button type="button" class="bj-datepicker__day bj-datepicker__day--outside">28</button>
    <button type="button" class="bj-datepicker__day bj-datepicker__day--today">15</button>
    <button type="button" class="bj-datepicker__day bj-datepicker__day--selected">20</button>
    <button type="button" class="bj-datepicker__day" disabled>1</button>
  </div>
</div>

Vues mois et année

Pour les modes month et year du composant Vue, les grilles utilisent bj-datepicker__month-cell / bj-datepicker__year-cell avec --today, --selected et pour les années hors décennie bj-datepicker__year-cell--outside.

<div class="bj-datepicker__months-grid">
  <button type="button" class="bj-datepicker__month-cell bj-datepicker__month-cell--today">Jan</button>
  <button type="button" class="bj-datepicker__month-cell bj-datepicker__month-cell--selected">Fév</button>
</div>
<div class="bj-datepicker__years-grid">
  <button type="button" class="bj-datepicker__year-cell bj-datepicker__year-cell--outside">2019</button>
  <button type="button" class="bj-datepicker__year-cell bj-datepicker__year-cell--selected">2024</button>
</div>

Classes CSS

Classe	Description
`bj-label`	Libellé et aide (même usage que les autres champs).
`bj-hint`	Libellé et aide (même usage que les autres champs).
`bj-datepicker`	Conteneur principal.
`bj-datepicker--sm`	Variante compacte.
`bj-datepicker__field`	Ligne champ + bouton calendrier.
`bj-datepicker__input`	Champ de saisie de la date.
`bj-datepicker__trigger`	Bouton d’ouverture du calendrier.
`bj-datepicker__calendar`	Panneau calendrier (généré par JS).
`bj-datepicker__nav`	Barre de navigation du calendrier.
`bj-datepicker__nav-btn`	Bouton précédent / suivant.
`bj-datepicker__nav-title`	Titre cliquable (mois/année ou année).
`bj-datepicker__weekdays / bj-datepicker__weekday`	Libellé de jour de la semaine.
`bj-datepicker__grid`	Grille 7×n des jours.
`bj-datepicker__day`	Bouton jour (état de base).
`bj-datepicker__day--outside`	Jour hors mois affiché (grisé).
`bj-datepicker__day--today`	Jour actuel.
`bj-datepicker__day--selected`	Jour sélectionné.
`bj-datepicker__month-cell (+ --today, --selected)`	Cellule de mois.
`bj-datepicker__year-cell (+ --outside, --today, --selected)`	Cellule d’année.