Statut
Le composant input-date est un type de champ de saisie de date dérivé du composant input. Les informations ici concernent uniquement l'input-date. Pour les caractéristiques communes à tous les inputs, consultez la documentation du dsa-input.
Component checklist
Usage
<dsa-input-date
id="input"
name="Date"
label="Date"
></dsa-input-date>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/input-date/input-date.js'
import type { DSAInputDate } from '@ds-autonomie/web-components'
const inputEl = document.querySelector<DSAInputDate>('#input')
if (inputEl !== null) {
console.log(inputEl.value)
}
</script>
Code HTML à implémenter pour utiliser le composant de champ de saisie de date
import { Component } from '@angular/core';
import type { DSAInputDate } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/input-date/input-date.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-input-date
id="input"
name="Date"
label="Date"
></dsa-input-date>
app.component.html
API
Attributs et propriétés communes
voir documentation du dsa-input
Attributs et propriétés spécifiques
|
Propriété attribut |
Description |
Type |
Valeur par défaut |
|---|---|---|---|
|
calendarStartDate calendar-start-date |
La valeur de départ du calendrier si aucune date n'est sélectionnée. |
string |
Date du jour |
|
disableDate (pas d’attribut) |
Fonction qui reçoit chaque date affichée et retourne true pour la désactiver. Les dates désactivées ne peuvent pas être sélectionnées et bloqueront la soumission du formulaire. |
(date: Date) => boolean |
- |
|
disabledDateError disabled-date-error |
Message d'erreur personnalisé affiché quand une date désactivée par la fonction disableDate est sélectionnée. |
string |
- |
|
hideCalendar hide-calendar |
Cache le bouton d'ouverture du calendrier. |
boolean |
false |
|
hoist |
Activez cette option pour éviter que le panneau ne soit coupé lorsque le composant est placé à l'intérieur d'un conteneur avec overflow : scroll | auto. Hoisting utilise une stratégie de positionnement fixe qui fonctionne dans de nombreux cas, mais pas dans tous |
boolean |
false |
|
range |
Permet la sélection d'une plage de dates |
boolean |
false |
Méthodes communes
voir documentation du dsa-input
Méthodes spécifiques
|
Nom |
Description |
Type |
|---|---|---|
|
hideDatePicker() |
Cache le calendrier pour les type="date" |
() => void |
|
showDatePicker() |
Affiche le sélecteur le calendrier pour les type="date" |
() => void |
Évènements communs
voir documentation du dsa-input
Évènements relatifs au dropdown du sélecteur
voir documentation du dsa-dropdown
Évènements spécifiques
|
Nom |
Description |
|---|---|
|
dsa-date-selected |
Émis lorsqu’une date est sélectionnée via le calendrier interactif |
|
dsa-month-year-selected |
Émis lorsque mois ou l’année affiché(e) dans la calendrier change |
Ci-dessous quelques points d’attention spécifiques à ce dérivé du dsa-input:
|
Attribut |
Valeur attendue |
Exemple |
|---|---|---|
|
value |
Chaine de caractère suivant le format “date string” (MDN), “AAAA-MM-JJ”. |
”2024-12-25” |
|
min |
Chaine de caractère suivant le format “date string” (MDN), “AAAA-MM-JJ”. |
”2004-06-30” |
|
max |
Chaine de caractère suivant le format “date string” (MDN), “AAAA-MM-JJ”. |
”2007-03-13” |
|
calendar-start-date |
Chaine de caractère suivant le format “date string” (MDN), “AAAA-MM-JJ”. |
”2025-05-05” |
|
lang |
Chaine de caractères suivant la RFC 5646 (MDN), “ab-CD”. |
"fr-FR" |