Composants

FormeDatePicker

Le sélecteur de date. Enrobe le DateInput d'Astryx avec une API chaîne "AAAA-MM-JJ" — pas d'objet @internationalized/date à manipuler côté appelant. Le localisant fr-CH (mois FR, semaine dès lundi) est fourni par le composant compagnon FormeLocale, à monter haut dans l'arbre.

value, defaultValue et onChange travaillent sur des chaînes ISO "AAAA-MM-JJ". Pour la soumission dans un <form>, fournis name : un <input type="hidden"> est rendu automatiquement.

import { FormeDatePicker } from "@forme-ch/ui/controls";

const [date, setDate] = useState("2026-09-15");

<FormeDatePicker
  label="Échéance de la facture"
  value={date}
  onChange={setDate}
  isRequired
/>

États

<FormeDatePicker label="Requis" isRequired defaultValue="2026-01-31" />
<FormeDatePicker label="Désactivé" isDisabled defaultValue="2026-01-31" />

Props

Prop	Type	Défaut	Description
`value`	`string`	—	Mode contrôlé. Format `"AAAA-MM-JJ"`.
`defaultValue`	`string`	—	Mode non-contrôlé. Format `"AAAA-MM-JJ"`.
`onChange`	`(value: string) => void`	—	Callback à la sélection (chaîne `"AAAA-MM-JJ"`, ou vide).
`label`	`string`	—	Libellé visible.
`ariaLabel`	`string`	—	Nom accessible si aucun `label` visible (repli littéral « Date »).
`name`	`string`	—	Nom du champ : émet un `<input type="hidden">` pour la soumission form.
`isRequired`	`boolean`	—	Marque le champ requis.
`isDisabled`	`boolean`	—	Désactive le champ.

Accepte aussi className et style.

Accessibilité

Le champ porte un nom accessible via label (visible) ou ariaLabel (repli littéral « Date »). La saisie segmentée (jour / mois / année), la navigation clavier et le format localisé sont gérés par Astryx. Pense à envelopper l'application dans FormeLocale pour obtenir le calendrier et les libellés en français suisse.

Do & Don't

✓ À faire

Manipuler des chaînes "AAAA-MM-JJ". Monter FormeLocale une fois, au niveau du layout.

✕ À éviter

Passer un objet CalendarDate ou un Date JS à value. Reconstruire un calendrier maison.