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.

Import

import '@merisia-inc/merisia-components/date-input';

Extension

Vous pouvez sous-classer ce composant pour ajouter ou redéfinir des propriétés, méthodes ou styles :

import { customElement } from 'lit/decorators.js';
import { MerisiaDateInput } from '@merisia-inc/merisia-components';

@customElement('my-date-input')
export class MyDateInput extends MerisiaDateInput {
  // Ajoutez ou redéfinissez des propriétés, méthodes ou styles ici.
}

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