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-time
id="input"
name="Time"
label="Time"
></dsa-input-time>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/input-time/input-time.js'
import type { DSAInputTime } from '@ds-autonomie/web-components'
const inputEl = document.querySelector<DSAInputTime>('#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 { DSAInputTime } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/input-time/input-time.js'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-input-time
id="input"
name="Time"
label="Time"
></dsa-input-time>
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 |
|---|---|---|---|
|
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 |
Méthodes communes
voir documentation du dsa-input
Méthodes spécifiques
|
Nom |
Description |
Type |
|---|---|---|
|
showTimePicker() |
Affiche le sélecteur de temps |
() => void |
|
hideDatePicker() |
Cache le sélecteur de temps |
() => void |
Ci-dessous quelques points d’attention spécifiques à ce dérivé du dsa-input:
|
Attribut |
Valeur attendue |
Exemple |
|---|---|---|
|
min |
Chaine de caractère suivant le format “time value” (MDN), “HH:mm” ou “HH:mm:ss”. Valeur par défaut : ”00:00” |
”08:00” |
|
max |
Chaine de caractère suivant le format “time value” (MDN), “HH:mm” ou “HH:mm:ss”. Valeur par défaut : ”23:59” |
”19:00” |
|
step |
Valeur en secondes. Si la valeur est inférieure à 60, le champ affichera également les secondes. Valeur par défaut : 60 |
900 (15 minutes) |