Calendrier

Calendrier en vue mensuelle. Réutilise l'algorithme de grille mensuelle du core de DatePicker, et prend en charge les contraint de plage ainsi que la navigation par touches directionnelles dans la grille.

Utilisation de base

Utilisation de base

oct. 2026

dim.lun.mar.mer.jeu.ven.sam.

<script setup>
import { ref } from 'vue'
const date = ref(new Date())
</script>

<template>
  <LhCalendar v-model="date" />
</template>

<script>
export default {
  data() {
    return { date: new Date() }
  },
}
</script>

<template>
  <LhCalendar v-model="date" />
</template>

Plage de dates et sélection multiple

selection prend en charge trois modes : 'single' (par défaut) / 'range' (deux clics définissent le début et la fin) / 'multiple' (les clics basculent plusieurs dates).

Plage de dates

oct. 2026

dim.lun.mar.mer.jeu.ven.sam.

nov. 2026

dim.lun.mar.mer.jeu.ven.sam.

<script setup>
import { ref } from 'vue'
const span = ref([new Date(2026, 8, 5), new Date(2026, 8, 20)])
</script>

<template>
  <LhCalendar v-model="span" selection="range" :panels="2" />
</template>

<script>
export default {
  data() {
    return { span: [new Date(2026, 8, 5), new Date(2026, 8, 20)] }
  },
}
</script>

<template>
  <LhCalendar v-model="span" selection="range" :panels="2" />
</template>

Sélection multiple

oct. 2026

dim.lun.mar.mer.jeu.ven.sam.

<script setup>
import { ref } from 'vue'
const dates = ref([new Date(2026, 8, 10)])
</script>

<template>
  <LhCalendar v-model="dates" selection="multiple" />
</template>

<script>
export default {
  data() {
    return { dates: [new Date(2026, 8, 10)] }
  },
}
</script>

<template>
  <LhCalendar v-model="dates" selection="multiple" />
</template>

Contrainte de plage sélectionnable

Contrainte de plage

oct. 2026

dim.lun.mar.mer.jeu.ven.sam.

<script setup>
import { ref } from 'vue'

// Attention : en JS, les mois commencent à 0, new Date(2026, 8, 1) correspond au 1er septembre
const range = [new Date(2026, 8, 1), new Date(2026, 8, 28)]
const rangeDate = ref(new Date())
</script>

<template>
  <LhCalendar v-model="rangeDate" :range="range" />
</template>

<script>
export default {
  data() {
    return {
      // Attention : en JS, les mois commencent à 0, new Date(2026, 8, 1) correspond au 1er septembre
      range: [new Date(2026, 8, 1), new Date(2026, 8, 28)],
      rangeDate: new Date(),
    }
  },
}
</script>

<template>
  <LhCalendar v-model="rangeDate" :range="range" />
</template>

Forme repliée en input

mode="input" replie le panneau persistant dans un champ de saisie, dépliable au clic, afin d'économiser de l'espace vertical. panels contrôle le nombre de panneaux mensuels affichés après déploiement, placeholder personnalise le texte indicatif et close-on-select décide du repli automatique après sélection.

Forme input + double panneau

oct. 2026

dim.lun.mar.mer.jeu.ven.sam.

nov. 2026

dim.lun.mar.mer.jeu.ven.sam.

<script setup>
import { ref } from 'vue'
const inputDate = ref(new Date())
</script>

<template>
  <LhCalendar
    v-model="inputDate"
    mode="input"
    :panels="2"
    placeholder="Sélectionner une date"
  />
</template>

<script>
export default {
  data() {
    return { inputDate: new Date() }
  },
}
</script>

<template>
  <LhCalendar
    v-model="inputDate"
    mode="input"
    :panels="2"
    placeholder="Sélectionner une date"
  />
</template>

Pas de repli automatique après sélection

oct. 2026

dim.lun.mar.mer.jeu.ven.sam.

<script setup>
import { ref } from 'vue'
const inputDate2 = ref(new Date())
</script>

<template>
  <LhCalendar
    v-model="inputDate2"
    mode="input"
    :close-on-select="false"
    placeholder="Garder le panneau ouvert après sélection"
  />
</template>

<script>
export default {
  data() {
    return { inputDate2: new Date() }
  },
}
</script>

<template>
  <LhCalendar
    v-model="inputDate2"
    mode="input"
    :close-on-select="false"
    placeholder="Garder le panneau ouvert après sélection"
  />
</template>

API

LhCalendar Props

Propriété	Description	Type	Valeur par défaut
modelValue	Date sélectionnée (v-model contrôlé)	Date | Date[]	—
selection	Mode de sélection : sélection unique (par défaut) / plage de dates (début et fin) / sélection multiple	"single" | "range" | "multiple"	'single'
range	Contrainte de plage de dates sélectionnables	[Date, Date]	—
mode	Forme d'affichage	"panel" | "input"	'panel'
panels	Nombre de panneaux mensuels affichés simultanément (disposés en flex avec retour à la ligne)	number	1
placeholder	Texte indicatif en mode input	string	—
closeOnSelect	Replier automatiquement le panneau après sélection en mode input	boolean	true
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètre de rappel
update:modelValue	Déclenché lorsque la sélection change (v-model)	(value: Date | Date[])
change	Déclenché lorsque la sélection change	(value: Date | Date[])
select	Déclenché lors de la sélection d'une date (clic ou navigation clavier)	(value: Date)

Slots : cell (cellule personnalisée), header (en-tête).

Accessibilité

• Sémantique de grille role="grid" (lignes row, cellules gridcell), aria-current="date" sur le jour courant
• Les touches directionnelles déplacent le focus entre les dates (±1 jour / ±7 jours), Home/End vont en début/fin de ligne, PageUp/Down changent de mois — conformément au pattern grid des APG
• Les dates hors plage sont disabled en natif et exclues des interactions

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/calendar/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhCalendarMode

/** Forme d'affichage : panel, panneau persistant (par défaut) / input, panneau replié déployé au clic sur le champ */
export type LhCalendarMode = 'panel' | 'input'

LhCalendarValue

/** La forme de la valeur contrôlée dépend de selection : unique, Date / plage de dates, Date[] (début et fin, longueur 2) / sélection multiple, Date[].
 *  Pas de tuple [Date, Date] : le compilateur SFC ne peut pas déduire le type d'exécution à partir d'un tuple, ce qui produirait un avertissement de validation de prop */
export type LhCalendarValue = Date | Date[]

LhCalendarProps

export interface LhCalendarProps {
  /** Sélection courante (v-model contrôlé ; à défaut, l'état de sélection est géré en interne au composant) */
  modelValue?: LhCalendarValue
  /** Mode de sélection : sélection unique (par défaut) / plage de dates (début et fin) / sélection multiple */
  selection?: LhCalendarSelection
  /** Contrainte de plage de dates sélectionnables */
  range?: LhCalendarRange
  /** Forme d'affichage : panel, panneau persistant (par défaut) / input, panneau replié déployé au clic sur le champ */
  mode?: LhCalendarMode
  /** Nombre de panneaux mensuels affichés simultanément (disposés en flex avec retour à la ligne) */
  panels?: number
  /** Texte indicatif en mode input */
  placeholder?: string
  /** Replier automatiquement le panneau après sélection en mode input */
  closeOnSelect?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhCalendarSelection _{(provient de @lh-ui/share/core/calendar)}

/** Mode de sélection : sélection unique / plage de dates (début et fin) / sélection multiple */
export type LhCalendarSelection = 'single' | 'range' | 'multiple'

LhCalendarRange _{(provient de @lh-ui/share/core/calendar)}

/** Contrainte de plage de dates sélectionnables */
export type LhCalendarRange = [Date, Date]