Composant · Formulaire

DatePicker

Stable

Sélecteur de date en lecture seule avec popover calendrier : mode date unique ou plage, navigation par mois, bornes min/max, premier jour de semaine déduit de la locale et bouton « Aujourd’hui ».

Date de déploiement

Date d'expiration

Voir le code (Svelte)

<DatePicker label="Date de déploiement" value="2026-06-15" />
<DatePicker label="Date d'expiration" value="2026-12-31" size="sm" />

Exemples

Date unique

Date de l’événement

Sélectionnez un jour.

Voir le code (Svelte)

<DatePicker
  label="Date de l’événement"
  helperText="Sélectionnez un jour."
  value="2026-06-15"
/>

Plage de dates

Période de réservation

Voir le code (Svelte)

<DatePicker label="Période de réservation" mode="range" />

Dates bornées (min / max)

Date dans les 30 prochains jours

Voir le code (Svelte)

<DatePicker
  label="Date dans les 30 prochains jours"
  min="2026-06-01"
  max="2026-06-30"
  value="2026-06-15"
/>

Champ invalide

Date limite

Une date est requise.

Voir le code (Svelte)

<DatePicker
  label="Date limite"
  size="sm"
  errorText="Une date est requise."
  invalid
/>

API

Prop	Type	Default
`value`	`Date \| DatePickerRange \| null` (`$bindable`)	déduit du mode
`mode`	`"single" \| "range"`	`"single"`
`label`	`string`	optionnel
`helperText`	`string`	optionnel
`errorText`	`string`	optionnel
`invalid`	`boolean`	`false`
`disabled`	`boolean`	`false`
`min`	`Date`	optionnel
`max`	`Date`	optionnel
`locale`	`string`	`"fr-FR"`
`placeholder`	`string`	déduit de la locale
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`id`	`string`	auto-généré
`openLabel`	`string`	déduit de la locale
`previousMonthLabel`	`string`	déduit de la locale
`nextMonthLabel`	`string`	déduit de la locale
`todayLabel`	`string`	déduit de la locale
`class`	`string`	optionnel
`...rest`	`HTMLAttributes<HTMLDivElement>` (sauf `class`)	optionnel

Notes d’usage

En `mode="single"` (défaut) la valeur liée est `Date | null` ; en `mode="range"` c’est un objet `DatePickerRange` `{ start, end }`. Le runtime lit `mode` au moment de l’accès, donc une mauvaise combinaison reste non fatale.

Les libellés (`openLabel`, `previousMonthLabel`, `nextMonthLabel`, `todayLabel`) et le `placeholder` sont déduits de `locale` (fr-FR par défaut) si non fournis.

Le popover se ferme au clic extérieur et avec la touche Échap ; les dates hors `min`/`max` sont désactivées.

Tokens utilisés

--st-component-field-gap
--st-component-field-labelText
--st-component-field-helpText
--st-component-field-errorText
--st-component-field-maxWidth
--st-component-control-border
--st-component-control-hoverBorder
--st-component-control-hoverBackground
--st-component-control-radius
--st-component-control-focusRing
--st-component-control-mdHeight
--st-component-popover-background
--st-component-popover-border
--st-component-popover-shadow
--st-component-popover-zIndex
--st-component-dropdown-selectedBackground
--st-component-dropdown-optionHoverBackground
--st-semantic-surface-default
--st-semantic-border-subtle
--st-semantic-text-secondary
--st-semantic-feedback-error
--st-motion-fast
--st-motion-easing