Sélecteur de date

Sélecteur de date. Cinq modes : date / month / year / datetime / range : exploration progressive au sein du panneau (date → mois → année), datetime ajoute des colonnes horaires sous le calendrier (heures/minutes/secondes, roulette ou clics, fusion avec la date lors de la validation), range offre une sélection en deux étapes (le premier clic définit le point de départ et le met en surbrillance, le second clic normalise l'intervalle puis surligne les jours intermédiaires) ; le panneau est monté dans le body et format contrôle le format d'affichage.

Sélecteur de date

<template>
  <div class="demo-col" style="gap: 16px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhDatePicker v-model="date" placeholder="Choisir une date" format="dd/MM/yyyy" clearable />
      <LhDatePicker v-model="month" mode="month" placeholder="Choisir un mois" size="small" />
      <LhDatePicker v-model="year" mode="year" placeholder="Choisir une année" size="large" />
      <LhDatePicker v-model="datetime" mode="datetime" placeholder="Choisir une date et une heure" disabled />
      <LhDatePicker v-model="date" placeholder="Lecture seule" readonly />
    </div>
    <LhDatePicker
      v-model="range"
      mode="range"
      range-separator="au"
      placeholder="Choisir une plage de dates (deux clics)"
      :cell-class-name="cellClass"
      popper-class="demo-popper"
    />
    <p class="demo-note">
      Date : {{ fmt(date) }} | Mois : {{ fmt(month) }} | Année : {{ fmt(year) }} | Date et heure : {{ fmt(datetime) }}
    </p>
    <p class="demo-note">Plage de dates (rangeSeparator="au", week-end en rouge) : {{ fmtRange(range) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    date: new Date(2026, 9, 3),
    month: new Date(2026, 9, 1),
    year: new Date(2026, 0, 1),
    datetime: null,
    range: null,
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleString('fr-FR', { hour12: false }) : '(non sélectionné)'
    },
    fmtRange(v) {
      if (!Array.isArray(v) || v.length !== 2) return '(non sélectionné)'
      const [a, b] = v
      const s = (d) => (d instanceof Date ? d.toLocaleString('fr-FR', { hour12: false }) : '(non sélectionné)')
      return `${s(a)} ~ ${s(b)}`
    },
    cellClass(date) {
      return date.getDay() === 0 || date.getDay() === 6 ? 'demo-cell-weekend' : ''
    },
  },
}
</script>

Props

Prop	Description	Type	Valeur par défaut
v-model	Sélection courante	Date \| [Date, Date] \| null	—
mode	Mode : date / mois / année / date et heure / plage de dates	'date' \| 'month' \| 'year' \| 'datetime' \| 'range'	'date'
size	Taille	'small' \| 'medium' \| 'large'	'medium'
disabled / clearable / readonly	Désactivé / effaçable / lecture seule	boolean	false / true / true
placeholder	Texte de substitution	string	Pack de langue
format	Format d'affichage (yyyy-MM-dd, yyyy-MM, etc.)	string	'yyyy-MM-dd'
rangeSeparator	Texte du séparateur en mode plage de dates	string	'~'
cellClassName	Classe personnalisée des cellules	(date: Date) => string	—
popperClass	Classe additionnelle de la couche flottante	string	—
teleportTarget	Cible de montage de la couche flottante	string \| HTMLElement	'body'
sx	Raccourci de mise en page sx	—	—

Events

input (v-model), change (value)

Accessibilité

Le déclencheur est role="combobox" + aria-expanded, le panneau role="grid" ; en mode datetime, les colonnes horaires utilisent role="spinbutton" avec aria-valuenow/min/max ; placé dans un LhFormItem, aria-invalid est automatiquement posé en cas d'échec de validation.