merisia-date-input
<merisia-date-input>Saisie de date accessible avec champs séparés. Ordre configurable, mode date de naissance, affichage du mois en texte, erreurs par champ et validation min/max.
Démos
Standard
<merisia-date-input label="Date" name="date" hint="Par exemple, 15 03 1990"></merisia-date-input>Mode date de naissance (birth-date)
Active les attributs autocomplete bday-* sur chaque champ.
<merisia-date-input label="Date de naissance" name="birthdate" birth-date required></merisia-date-input>Ordre configurable (fields)
Pour les interfaces en anglais : mois avant jour.
<merisia-date-input label="Date" fields="month,day,year"></merisia-date-input>Mois et année seulement
<merisia-date-input label="Mois et annee" fields="month,year"></merisia-date-input>Mois en texte (month-display)
<merisia-date-input label="Date" month-display="long"></merisia-date-input>
<merisia-date-input label="Date" month-display="short"></merisia-date-input>Erreur globale
el.errors = ["La date est invalide."];Erreurs par champ (GOV.UK)
el.dayErrors = ['Entrez un jour valide'];
el.yearErrors = ["L'annee doit comporter 4 chiffres"];Min / Max
<merisia-date-input label="Date" min="2024-01-01" max="2025-12-31"></merisia-date-input>Lecture seule
<merisia-date-input label="Date de naissance" name="birthdate" value="1990-07-21" readonly></merisia-date-input>Propriétés
| Propriété | Attribut | Type | Défaut | Description |
|---|---|---|---|---|
| MerisiaDateInput (propres) | ||||
| label | label | string | '' | Légende du champ de date |
| hint | hint | string | '' | Aide contextuelle |
| errors | - | string[] | [] | Erreurs globales sur la date entière |
| dayErrors | - | string[] | [] | Erreurs spécifiques au champ jour |
| monthErrors | - | string[] | [] | Erreurs spécifiques au champ mois |
| yearErrors | - | string[] | [] | Erreurs spécifiques au champ année |
| errorPrefix | error-prefix | string | 'Erreur :' | Préfixe des messages d'erreur (i18n) |
| dayLabel | day-label | string | 'Jour' | Libellé du champ jour (i18n) |
| monthLabel | month-label | string | 'Mois' | Libellé du champ mois (i18n) |
| yearLabel | year-label | string | 'Année' | Libellé du champ année (i18n) |
| fields | fields | string | 'day,month,year' | Ordre et présence des champs (ex. "month,day,year" ou "month,year") |
| birthDate | birth-date | boolean | false | Active autocomplete bday-* sur chaque champ |
| monthDisplay | month-display | 'numeric' | 'long' | 'short' | 'numeric' | Format du mois : numérique, long ou abrégé |
| min | min | string | '' | Date minimale acceptée (YYYY-MM-DD ou YYYY-MM) |
| max | max | string | '' | Date maximale acceptée (YYYY-MM-DD ou YYYY-MM) |
| MerisiaFormElement (hérités) | ||||
| name | name | string | '' | Nom du champ (les sous-champs utilisent name-day, name-month, name-year) |
| value | value | string | '' | Valeur au format ISO 8601 YYYY-MM-DD ou YYYY-MM |
| required | required | boolean | false | Rend la date obligatoire |
| disabled | disabled | boolean | false | Désactive les champs |
| MerisiaElement (hérités) | ||||
| id | id | string | auto-généré | Identifiant unique |
| lang | lang | string | 'fr' | Langue pour les noms de mois (Intl) et messages internes |
| autofocus | autofocus | boolean | false | Donne le focus au premier champ au rendu |
Ressources externes
Import
import '@merisia-inc/merisia-components/date-input';