2020-10-04 19:57:49 +08:00
## TimeSelect
Utiliser TimeSelect pour sélectionner un horaire.
### Sélection d'horaire fixe
Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisisse un.
2020-12-18 10:04:48 +08:00
:::demo Utilisez `el-time-select` puis assignez un horaire de début, de fin et un pas grâce aux propriétés `start` , `end` et `step` de l'attribut.
2021-09-04 19:29:28 +08:00
2020-10-04 19:57:49 +08:00
```html
< el-time-select
v-model="value"
2021-09-04 19:29:28 +08:00
start="08:30"
step="00:15"
end="18:30"
placeholder="Choisissez un horaire"
>
2020-10-04 19:57:49 +08:00
< / el-time-select >
< script >
export default {
data() {
return {
2021-09-04 19:29:28 +08:00
value: '',
}
},
2020-10-04 19:57:49 +08:00
}
< / script >
```
2021-09-04 19:29:28 +08:00
2020-10-04 19:57:49 +08:00
:::
### Intervalle de temps fixe
Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélectionné en premier, certains horaires de fins seront désactivés s'ils ont lieu avant l'horaire de début.
:::demo
2021-09-04 19:29:28 +08:00
2020-10-04 19:57:49 +08:00
```html
< template >
< el-time-select
placeholder="Horaire de début"
v-model="startTime"
2021-09-04 19:29:28 +08:00
start="08:30"
step="00:15"
end="18:30"
>
2020-10-04 19:57:49 +08:00
< / el-time-select >
< el-time-select
placeholder="Horaire de fin"
v-model="endTime"
2021-09-04 19:29:28 +08:00
start="08:30"
step="00:15"
end="18:30"
:minTime="startTime"
>
2020-10-04 19:57:49 +08:00
< / el-time-select >
< / template >
< script >
export default {
data() {
return {
startTime: '',
2021-09-04 19:29:28 +08:00
endTime: '',
}
},
2020-10-04 19:57:49 +08:00
}
< / script >
```
2021-09-04 19:29:28 +08:00
2020-10-04 19:57:49 +08:00
:::
### Attributs
2021-09-04 19:29:28 +08:00
| Attribut | Description | Type | Valeurs acceptées | Défaut |
| --------------------- | ---------------------------------------------------------------------- | ------- | --------------------- | -------------------- |
| model-value / v-model | La valeur liée. | string | — | — |
| disabled | Si TimeSelect est désactivé. | boolean | — | false |
| editable | Si le champ d'input est éditable. | boolean | — | true |
| clearable | Si un bouton d'effacement doit être affiché. | boolean | — | true |
| size | Taille du champ. | string | medium / small / mini | — |
| placeholder | Placeholder en mode non-intervalle. | string | — | — |
| name | Attribut `name` natif de l'input. | string | — | — |
| prefix-icon | Classe de l'icône de préfixe. | string | — | el-icon-time |
| clear-icon | Classe de l'icône d'effacement. | string | — | el-icon-circle-close |
| start | Horaire de début. | string | — | 09:00 |
| end | Horaire de fin. | string | — | 18:00 |
| step | Intervalle entre les horaires. | string | — | 00:30 |
| minTime | Horaire minimum, n'importe quel horaire avant celui-ci sera désactivé. | string | — | 00:00 |
| maxTime | Horaire maximum, n'importe quel horaire après celui-ci sera désactivé. | string | — | — |
2020-12-16 22:09:48 +08:00
2020-10-04 19:57:49 +08:00
### Évènements
2021-09-04 19:29:28 +08:00
| Nom | Description | Paramètres |
| ------ | ---------------------------------------------------- | ------------------------ |
| change | Se déclenche quand l'utilisateur confirme la valeur. | La valeur confirmée. |
| blur | Se déclenche quand le composant perd le focus. | L'instance du composant. |
| focus | Se déclenche quand le composant a le focus. | L'instance du composant. |
2020-10-04 19:57:49 +08:00
### Méthodes
2021-09-04 19:29:28 +08:00
| Méthode | Description | Paramètres |
| ------- | --------------------------------- | ---------- |
| focus | Met le focus sur le composant. | — |
| blur | Enlève le focus sur le composant. | — |
