Formulaires

Saisie de date

إدخال التاريخDate input

Stablesrc/dsm/components/date-input.tsx
Saisie d'une date en trois champs numériques distincts (jour, mois, année), à la manière du GOV.UK Design System. Plus robuste qu'un sélecteur calendrier sur mobile ou pour une date passée éloignée (date de naissance), et immédiatement lisible sans dépendre d'un format implicite.

Import

import { DateInput } from "@/dsm/components/date-input";

Exemples

Par défaut

Un seul champ masqué JJ/MM/AAAA : les séparateurs s'insèrent pendant la saisie.

LTR

Par exemple : 12/05/1990

États

Valeur initiale, erreur de validation et champ désactivé.

LTR

Indiquée au recto de la carte.

Par exemple : 12/05/1990

Renseignée automatiquement à la validation.

Contrôlé et validé

Valeur pilotée par le parent et vérification de la date avec parseDateMask.

LTR

Par exemple : 12/05/1990

Valeur :—

Usage

Quand l'utiliser

  • Utilisez `DateInput` pour une date de naissance ou toute date passée que l'usager connaît par cœur et tape plus vite qu'il ne la sélectionnerait dans un calendrier.
  • Laissez le `hint` par défaut (exemple de format) tant qu'aucune contrainte particulière ne s'applique.

Quand ne pas l'utiliser

  • N'utilisez pas `DateInput` pour choisir une date future dans un calendrier de rendez-vous : un sélecteur visuel de type calendrier est plus adapté.
  • N'utilisez pas ce composant si le format de date doit rester ambigu entre plusieurs locales : les trois champs séparés lèvent justement cette ambiguïté.

Accessibilité & langues

Accessibilité

  • Chaque champ (jour, mois, année) porte son propre `<label>` visible, jamais uniquement un `placeholder`.
  • `inputMode="numeric"` affiche le clavier numérique sur mobile sans changer le type du champ, qui reste du texte pour accepter les zéros initiaux.
  • Le groupe est annoncé comme un ensemble grâce à la légende du `Fieldset` sous-jacent.

RTL & multilingue

  • L'ordre jour / mois / année reste fixe quel que soit le sens de lecture, conformément aux recommandations d'accessibilité pour les dates segmentées.

Propriétés

DateInput
PropriétéTypeDéfautDescription
label*ReactNode—Libellé visible du champ.
hintReactNodet.dateHintAide affichée sous le libellé (format attendu par défaut).
errorReactNode—Message d'erreur ; passe le champ en état invalide.
requiredboolean—Ajoute la marque obligatoire au libellé.
valuestring—Valeur masquée contrôlée, par exemple « 12/05/1990 ».
defaultValuestring—Valeur initiale en mode non contrôlé.
onChange(value: string) => void—Appelé à chaque frappe avec la valeur masquée.
placeholderstringt.datePlaceholderTexte indicatif (JJ/MM/AAAA).
disabledboolean—Désactive la saisie.
namestring—Nom du champ dans le formulaire natif.
parseDateMask
PropriétéTypeDéfautDescription
valuestring—Retourne { day, month, year } si la date masquée est complète et existe, sinon null.

Composants liés