Système de design GCComposants
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Champ de date
<gcds-date-input>

Autres noms : date, zone de date, date connue. Le champ de date est un espace permettant de saisir une date connue.
  • GitHub
  • Figma

Aperçu du composant de champ de date

Sur cette page

Codage et accessibilité des champs de date

Appliquez les attributs essentiels

Utilisez toujours les attributs obligatoires suivants avec gcds-date-input :
  • name
  • legend
  • format

Choisir un format

Utilisez full,  compact ou iso  comme attribut de format du champ de date.
  • La valeur full générera des champs de formulaire pour l’année, le mois et le jour.
    • Dans ce format, le mois est un mot.
    • En anglais, l’ordre est mois, jour, année.
    • En français, l’ordre est jour, mois, année.
    • Le format du rendu sera AAAA-MM-JJ.
  • La valeur compact générera des champs de formulaire pour l’année et le mois.
    • Dans ce format, le mois est un mot.
    • En anglais et en français, l’ordre est mois, année.
    • Le format du rendu sera AAAA-MM.
  • La valeur iso générera des champs de formulaire pour l’année, le mois et le jour, dans cet ordre.
    • Dans ce format, toutes les valeurs sont numériques, conformément aux normes ISO.
    • Le format du rendu sera AAAA-MM-JJ.
Utilisez des propriétés valides Les propriétés du composant ont une validation intégrée. Les propriétés requises ou susceptibles d'être mal utilisées feront l'objet d'une validation. S'il y a des erreurs de validation, le composant ne fonctionnera pas et ne s'affichera pas. Consultez la console du navigateur pour plus de détails et ajustez les propriétés en conséquence pour que le rendu fonctionne correctement. Ajouter du texte explicatif
  • Utilisez l'attribut hint pour ajouter du texte explicatif.
  • Évitez d’ajouter, directement dans un champ, du texte explicatif qui disparaît lorsque le champ est sélectionné ou lorsqu'on y saisit une réponse.
Ajouter la validation et les messages d'erreur
  • Utilisez l'attribut required pour activer la validation et les messages d'erreur intégrés pour le champ de date.
  • Les champs comportant des exigences de saisie spécifiques feront l'objet d'une validation, même s'ils ne sont pas obligatoires.
  • Pour les champs facultatifs qui doivent être validés, par exemple pour vérifier le format d'une adresse courriel, ajoutez une validation et des messages d'erreur personnalisés.

Exemples

Explorez les différentes façons de configurer le composant. Chaque exemple présente une mise en œuvre fonctionnelle et du code prêt à copier.

Dans cette section

Attributs essentiels

Ces attributs sont requis pour que le composant fonctionne correctement.

format

L’attribut format définit le format d’affichage de la date. 
<gcds-date-input
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

legend

L’attribut legend définit la légende du champ de date. 
<gcds-date-input
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

name

L’attribut name identifie le composant dans le formulaire. Il permet de référencer le composant après l’envoi du formulaire. 
<gcds-date-input
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

Attributs facultatifs

Ces attributs vous permettent de personnaliser ou d’enrichir le comportement et la présentation du composant.

autofocus

L’attribut autofocus contrôle si le champ de date est ciblé automatiquement au chargement de la page. Par défaut, il est défini à false. Lorsqu’il est défini à true, le champ est ciblé à l’affichage. 
<gcds-date-input
  autofocus="true"
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

disabled

L’attribut disabled contrôle si le champ de date est désactivé ou non. Par défaut, il est défini à false. 
<gcds-date-input
  disabled="true"
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

error-message

L’attribut error-message définit le message d’erreur à afficher pour un champ de date invalide. 
<gcds-date-input
  error-message="Message d'erreur"
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

form

L’attribut form définit l’identifiant du formulaire auquel appartient le champ de date. 
<gcds-date-input
  form="form-id"
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

hint

L’attribut hint définit le texte explicatif affiché sous la légende. 
<gcds-date-input
  hint="Le jour peut être composé de 1 ou 2 chiffres. L’année doit inclure 4 chiffres."
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

max

L’attribut max définit la date maximale acceptée par le champ. Format : YYYY-MM-DD ou YYYY-MM. 
<gcds-date-input
  max="2000-01-01"
  hint="La date doit être avant le 2000-01-01"
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

min

L’attribut min définit la date minimale acceptée par le champ. Format : YYYY-MM-DD ou YYYY-MM. 
<gcds-date-input
  min="2000-01-01"
  hint="La date doit être après le 2000-01-01"
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

required

L’attribut required contrôle si le champ de date est obligatoire ou non. Lorsqu’il est défini à true, il ajoute « obligatoire » après la légende et active le validateur de champ obligatoire. 
<gcds-date-input
  required="true"
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

validate-on

L’attribut validate-on définit l’événement de validation pour le champ de date. 
<gcds-date-input
  validate-on="other"
  required="true"
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>

value

L’attribut value définit la date initiale affichée dans le composant. Il fournit également une référence à la date saisie. Format : YYYY-MM-DD ou YYYY-MM. 
<gcds-date-input
  value="2026-02-22"
  format="full"
  legend="Légende"
  name="example-default"
></gcds-date-input>
Générateur de code Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.
  • Choisissez des valeurs de code pour obtenir l'élément que vous voulez.
  • Obtenez le code et intégrez-le dans votre environnement.
  • Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).
Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.
Aidez-nous à nous améliorer Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact. Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes. Fournir des commentaires Signaler un problème sur GitHub
2026-06-10