Calendrier

Vue calendaire. Trois modes de sélection : date unique, période et sélection multiple ; range contraint les bornes des dates sélectionnables. Le mode panel affiche un panneau permanent, tandis que le mode input se replie en champ de saisie déployé au clic (panneau monté dans le body).

Calendrier

<template>
  <div class="demo-col" style="max-width: none">
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap">
      <LhCalendar v-model="single" selection="single" />
      <LhCalendar v-model="span" selection="range" mode="input" placeholder="Choisir une période" />
    </div>
    <p class="demo-note">Sélection unique : {{ fmt(single) }} | Période : {{ fmtArr(span) }}</p>
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap; margin-top: 16px">
      <LhCalendar v-model="multi" selection="multiple" :panels="2" :close-on-select="false" />
      <LhCalendar v-model="strict" selection="range" mode="panel" />
    </div>
    <p class="demo-note">Multiple (panels=2 double panneau, closeOnSelect=false ne se referme pas automatiquement) : {{ fmtArr(multi) }}</p>
    <p class="demo-note">Mode panneau range (mode="panel") : {{ fmtArr(strict) }}</p>
    <div class="demo-row" style="align-items: flex-start; flex-wrap: nowrap; margin-top: 16px">
      <LhCalendar v-model="clamped" selection="single" :range="bounds" />
    </div>
    <p class="demo-note">range limite l'intervalle sélectionnable (uniquement 2026-10-01 ~ 2026-10-15) : {{ fmt(clamped) }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    single: new Date(2026, 9, 3),
    span: [],
    multi: [],
    strict: [],
    clamped: new Date(2026, 9, 5),
    bounds: [new Date(2026, 9, 1), new Date(2026, 9, 15)],
  }),
  methods: {
    fmt(v) {
      return v instanceof Date ? v.toLocaleDateString('fr-FR') : '(non sélectionné)'
    },
    fmtArr(v) {
      if (!Array.isArray(v) || v.length === 0) return '(non sélectionné)'
      return v.map((d) => d.toLocaleDateString('fr-FR')).join(' ~ ')
    },
  },
}
</script>

Props

Prop	Description	Type	Valeur par défaut
v-model	Sélection courante ; Date en sélection unique, Date[] en période et en sélection multiple	Date \| Date[]	—
selection	Mode de sélection	'single' \| 'range' \| 'multiple'	'single'
range	Plage de dates sélectionnables [start, end] ; hors plage, désactivé	[Date, Date]	—
mode	Forme d'affichage : panel panneau permanent / input champ replié	'panel' \| 'input'	'panel'
panels	Nombre de panneaux mensuels affichés simultanément (disposés en flex avec retour à la ligne)	number	1
placeholder	Texte de substitution en mode input	string	Pack de langue
closeOnSelect	En mode input, refermer automatiquement après sélection ou non	boolean	true
sx	Raccourci de mise en page sx	—	—

Events

input (v-model), change (value), select (date)

Slots

Slot	Description
header	En-tête du panneau mensuel, paramètre de scope { year, month } (rendu par défaut au format « MMMM YYYY »)
cell	Cellule de date, paramètre de scope { date } (rendu par défaut : le numéro du jour)

Accessibilité

Le panneau est role="grid", la ligne des jours de la semaine role="row" et la cellule de date role="gridcell" ; les dates désactivées portent aria-disabled, et le déclencheur en mode input permet le déploiement au clavier et la navigation par flèches.