mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +08:00
b5ed49ae93
* feat(time-select): start of migration * feat(time-select): fix typo * feat(time-select): minor change * feat(time-select): working Vue.js 2 time-select * feat(time-select): migration to v3 * feat(time-select): add select element * feat(time-select): migrate v-model * feat(time-select): add type definition * feat(time-select): add default value for minTime * feat(time-select): fix documentation * feat(time-select): export select to use it * feat(time-select): fix form * feat(time-select): export time-select to see it in the website * feat(time-select): fix updateOptions methods * fix(popper): re-create popper if destroyed when updating * fix(select): fix options query event * fix(select): fix checkDefaultFirstOption function * feat(time-select): add update:modelValue to emit function * fix(select): better naming * feat(time-select): deprecated defautl value * feat(select): support clear icon * feat(select): add clear-icon documetnation
4.7 KiB
4.7 KiB
TimeSelect
Use el Time Select para input de tipo time.
Selector de tiempo fijo
Provee una lista de tiempo fijo para que los usuarios escojan.
:::demo Use el tag el-time-select
, se pueden asignar tiempo de inicio, tiempo de finalización y salto de tiempo con start
, end
y step
.
<el-time-select
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="Select time">
</el-time-select>
<script>
export default {
data() {
return {
value: ''
};
}
}
</script>
:::
Rango de tiempo fijo
Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambiará respectivamente.
:::demo
<template>
<el-time-select
placeholder="Start time"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
</el-time-select>
<el-time-select
placeholder="End time"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30',
minTime: startTime
}">
</el-time-select>
</template>
<script>
export default {
data() {
return {
startTime: '',
endTime: ''
};
}
}
</script>
:::
Atributos
Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
---|---|---|---|---|
value / v-model | valor enlazado | date(TimePicker) / string(TimeSelect) | - | - |
editable | si el input puede ser editado | boolean | — | true |
clearable | si mostrar el botón de borrado | boolean | — | true |
size | tamaño del input | string | medium / small / mini | — |
placeholder | placeholder en un modo fuera de rango | string | — | — |
picker-options | opciones adicionales, revisar la tabla posterior | object | — | {} |
name | como name en input nativo |
string | — | — |
prefix-icon | Clase personalizada para el icono de prefijado | string | — | el-icon-time |
clear-icon | Clase personalizada para el icono clear |
string | — | el-icon-circle-close |
Opciones para Time Select
Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
---|---|---|---|---|
start | tiempo de inicio | string | — | 09:00 |
end | tiempo de finalización | string | — | 18:00 |
step | salto de tiempo | string | — | 00:30 |
minTime | tiempo mínimo, cualquier tiempo antes de éste será deshabilitado | string | — | 00:00 |
maxTime | tiempo máximo, cualquier tiempo después de éste será deshabilitado | string | — | — |
Eventos
Nombre de Evento | Descripción | Parámetros |
---|---|---|
change | se lanza cuando el usuario confirma el valor | valor vinculado del componente |
blur | se lanza cuando el input se difumina | instancia del componente |
focus | se lanza cuando el input se enfoca | instancia del componente |
Metodos
Metodo | Descripción | Parameteros |
---|---|---|
focus | coloca el foco en el input | — |
blur | quitar el foco en el input | — |