mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-21 02:50:11 +08:00
fix(time-picker): fix missing blur methods and spelling error (#2457)
* fix(time-picker): fix missing blur methods and spelling error * fix: update
This commit is contained in:
kooriookami
GitHub
parent
abd902acd2
commit
f651dca37b
@ -307,6 +307,22 @@ describe('TimePicker', () => {
|
||||
const attr = popperEl.getAttribute('aria-hidden')
|
||||
expect(attr).toEqual('false')
|
||||
})
|
||||
|
||||
it('ref blur', async () => {
|
||||
_mount(`<el-time-picker
|
||||
v-model="value"
|
||||
ref="input"
|
||||
/>`, () => ({ value: new Date(2016, 9, 10, 18, 40) }), {
|
||||
mounted() {
|
||||
this.$refs.input.focus()
|
||||
this.$refs.input.blur()
|
||||
},
|
||||
})
|
||||
await nextTick()
|
||||
const popperEl = document.querySelector('.el-picker__popper')
|
||||
const attr = popperEl.getAttribute('aria-hidden')
|
||||
expect(attr).toEqual('true')
|
||||
})
|
||||
})
|
||||
|
||||
describe('TimePicker(range)', () => {
|
||||
|
||||
@ -147,7 +147,7 @@ interface PickerOptions {
|
||||
handleKeydown: any
|
||||
parseUserInput: any
|
||||
formatToString: any
|
||||
getRangeAvaliableTime: any
|
||||
getRangeAvailableTime: any
|
||||
getDefaultValue: any
|
||||
panelReady: boolean
|
||||
handleClear: any
|
||||
@ -273,11 +273,16 @@ export default defineComponent({
|
||||
emitInput(result)
|
||||
}
|
||||
const handleFocus = e => {
|
||||
if (props.readonly || pickerDisabled.value) return
|
||||
if (props.readonly || pickerDisabled.value || pickerVisible.value) return
|
||||
pickerVisible.value = true
|
||||
ctx.emit('focus', e)
|
||||
}
|
||||
|
||||
const handleBlur = () => {
|
||||
pickerVisible.value = false
|
||||
blurInput()
|
||||
}
|
||||
|
||||
const pickerDisabled = computed(() => {
|
||||
return props.disabled || elForm.disabled
|
||||
})
|
||||
@ -296,8 +301,8 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
if (pickerOptions.value.getRangeAvaliableTime) {
|
||||
result = pickerOptions.value.getRangeAvaliableTime(result)
|
||||
if (pickerOptions.value.getRangeAvailableTime) {
|
||||
result = pickerOptions.value.getRangeAvailableTime(result)
|
||||
}
|
||||
if (Array.isArray(result) && result.some(_ => !_)) {
|
||||
result = []
|
||||
@ -540,6 +545,7 @@ export default defineComponent({
|
||||
triggerClass,
|
||||
onPick,
|
||||
handleFocus,
|
||||
handleBlur,
|
||||
pickerVisible,
|
||||
pickerActualVisible,
|
||||
displayValue,
|
||||
|
||||
@ -49,7 +49,7 @@ import { EVENT_CODE } from '@element-plus/utils/aria'
|
||||
import { t } from '@element-plus/locale'
|
||||
import TimeSpinner from './basic-time-spinner.vue'
|
||||
import dayjs, { Dayjs } from 'dayjs'
|
||||
import { getAvaliableArrs, useOldValue } from './useTimePicker'
|
||||
import { getAvailableArrs, useOldValue } from './useTimePicker'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@ -95,7 +95,7 @@ export default defineComponent({
|
||||
// method
|
||||
const isValidValue = _date => {
|
||||
const parsedDate = dayjs(_date)
|
||||
const result = getRangeAvaliableTime(parsedDate)
|
||||
const result = getRangeAvailableTime(parsedDate)
|
||||
return parsedDate.isSame(result)
|
||||
}
|
||||
const handleCancel = () => {
|
||||
@ -108,7 +108,7 @@ export default defineComponent({
|
||||
const handleChange = (_date: Dayjs) => {
|
||||
// visible avoids edge cases, when use scrolls during panel closing animation
|
||||
if (!props.visible) { return }
|
||||
const result = getRangeAvaliableTime(_date).millisecond(0)
|
||||
const result = getRangeAvailableTime(_date).millisecond(0)
|
||||
ctx.emit('pick', result, true)
|
||||
}
|
||||
|
||||
@ -122,7 +122,7 @@ export default defineComponent({
|
||||
const mapping = ['hours', 'minutes'].concat(showSeconds.value ? ['seconds'] : [])
|
||||
const index = list.indexOf(selectionRange.value[0])
|
||||
const next = (index + step + list.length) % list.length
|
||||
timePickeOptions['start_emitSelectRange'](mapping[next])
|
||||
timePickerOptions['start_emitSelectRange'](mapping[next])
|
||||
}
|
||||
|
||||
const handleKeydown = event => {
|
||||
@ -137,32 +137,32 @@ export default defineComponent({
|
||||
|
||||
if (code === EVENT_CODE.up || code === EVENT_CODE.down) {
|
||||
const step = (code === EVENT_CODE.up) ? -1 : 1
|
||||
timePickeOptions['start_scrollDown'](step)
|
||||
timePickerOptions['start_scrollDown'](step)
|
||||
event.preventDefault()
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const getRangeAvaliableTime = (date: Dayjs) => {
|
||||
const avaliableMap = {
|
||||
hour: getAvaliableHours,
|
||||
minute: getAvaliableMinutes,
|
||||
second: getAvaliableSeconds,
|
||||
const getRangeAvailableTime = (date: Dayjs) => {
|
||||
const availableMap = {
|
||||
hour: getAvailableHours,
|
||||
minute: getAvailableMinutes,
|
||||
second: getAvailableSeconds,
|
||||
}
|
||||
let result = date;
|
||||
['hour', 'minute', 'second'].forEach(_ => {
|
||||
if (avaliableMap[_]) {
|
||||
let avaliableArr
|
||||
const method = avaliableMap[_]
|
||||
if (availableMap[_]) {
|
||||
let availableArr
|
||||
const method = availableMap[_]
|
||||
if (_ === 'minute') {
|
||||
avaliableArr = method(result.hour(), props.datetimeRole)
|
||||
availableArr = method(result.hour(), props.datetimeRole)
|
||||
} else if (_ === 'second') {
|
||||
avaliableArr = method(result.hour(), result.minute(), props.datetimeRole)
|
||||
availableArr = method(result.hour(), result.minute(), props.datetimeRole)
|
||||
} else {
|
||||
avaliableArr = method(props.datetimeRole)
|
||||
availableArr = method(props.datetimeRole)
|
||||
}
|
||||
if (avaliableArr && avaliableArr.length && !avaliableArr.includes(result[_]())) {
|
||||
result = result[_](avaliableArr[0])
|
||||
if (availableArr && availableArr.length && !availableArr.includes(result[_]())) {
|
||||
result = result[_](availableArr[0])
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -187,19 +187,19 @@ export default defineComponent({
|
||||
ctx.emit('set-picker-option', ['formatToString', formatToString])
|
||||
ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])
|
||||
ctx.emit('set-picker-option',['handleKeydown', handleKeydown])
|
||||
ctx.emit('set-picker-option',['getRangeAvaliableTime', getRangeAvaliableTime])
|
||||
ctx.emit('set-picker-option',['getRangeAvailableTime', getRangeAvailableTime])
|
||||
ctx.emit('set-picker-option',['getDefaultValue', getDefaultValue])
|
||||
const timePickeOptions = {} as any
|
||||
const timePickerOptions = {} as any
|
||||
const onSetOption = e => {
|
||||
timePickeOptions[e[0]] = e[1]
|
||||
timePickerOptions[e[0]] = e[1]
|
||||
}
|
||||
const pickerBase = inject('EP_PICKER_BASE') as any
|
||||
const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props
|
||||
const {
|
||||
getAvaliableHours,
|
||||
getAvaliableMinutes,
|
||||
getAvaliableSeconds,
|
||||
} = getAvaliableArrs(disabledHours, disabledMinutes, disabledSeconds)
|
||||
getAvailableHours,
|
||||
getAvailableMinutes,
|
||||
getAvailableSeconds,
|
||||
} = getAvailableArrs(disabledHours, disabledMinutes, disabledSeconds)
|
||||
|
||||
return {
|
||||
transitionName,
|
||||
|
||||
@ -79,7 +79,7 @@ import union from 'lodash/union'
|
||||
import { t } from '@element-plus/locale'
|
||||
import { EVENT_CODE } from '@element-plus/utils/aria'
|
||||
import TimeSpinner from './basic-time-spinner.vue'
|
||||
import { getAvaliableArrs, useOldValue } from './useTimePicker'
|
||||
import { getAvailableArrs, useOldValue } from './useTimePicker'
|
||||
|
||||
const makeSelectRange = (start, end) => {
|
||||
const result = []
|
||||
@ -138,12 +138,12 @@ export default defineComponent({
|
||||
|
||||
const isValidValue = _date => {
|
||||
const parsedDate = _date.map(_=> dayjs(_))
|
||||
const result = getRangeAvaliableTime(parsedDate)
|
||||
const result = getRangeAvailableTime(parsedDate)
|
||||
return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1])
|
||||
}
|
||||
|
||||
const handleChange = (_minDate, _maxDate) => {
|
||||
// todo getRangeAvaliableTime(_date).millisecond(0)
|
||||
// todo getRangeAvailableTime(_date).millisecond(0)
|
||||
ctx.emit('pick', [_minDate, _maxDate], true)
|
||||
}
|
||||
const btnConfirmDisabled = computed(() => {
|
||||
@ -169,9 +169,9 @@ export default defineComponent({
|
||||
const next = (index + step + list.length) % list.length
|
||||
const half = list.length / 2
|
||||
if (next < half) {
|
||||
timePickeOptions['start_emitSelectRange'](mapping[next])
|
||||
timePickerOptions['start_emitSelectRange'](mapping[next])
|
||||
} else {
|
||||
timePickeOptions['end_emitSelectRange'](mapping[next - half])
|
||||
timePickerOptions['end_emitSelectRange'](mapping[next - half])
|
||||
}
|
||||
}
|
||||
|
||||
@ -188,7 +188,7 @@ export default defineComponent({
|
||||
if (code === EVENT_CODE.up || code === EVENT_CODE.down) {
|
||||
const step = (code === EVENT_CODE.up) ? -1 : 1
|
||||
const role = selectionRange.value[0] < offset.value ? 'start' : 'end'
|
||||
timePickeOptions[`${role}_scrollDown`](step)
|
||||
timePickerOptions[`${role}_scrollDown`](step)
|
||||
event.preventDefault()
|
||||
return
|
||||
}
|
||||
@ -228,39 +228,39 @@ export default defineComponent({
|
||||
return union(defaultDisable, nextDisable)
|
||||
}
|
||||
|
||||
const getRangeAvaliableTime = (dates: Array<Dayjs>) => {
|
||||
return dates.map((_, index) => getRangeAvaliableTimeEach(dates[0], dates[1], index === 0 ? 'start' : 'end'))
|
||||
const getRangeAvailableTime = (dates: Array<Dayjs>) => {
|
||||
return dates.map((_, index) => getRangeAvailableTimeEach(dates[0], dates[1], index === 0 ? 'start' : 'end'))
|
||||
}
|
||||
|
||||
const {
|
||||
getAvaliableHours,
|
||||
getAvaliableMinutes,
|
||||
getAvaliableSeconds,
|
||||
} = getAvaliableArrs(disabledHours_, disabledMinutes_, disabledSeconds_)
|
||||
getAvailableHours,
|
||||
getAvailableMinutes,
|
||||
getAvailableSeconds,
|
||||
} = getAvailableArrs(disabledHours_, disabledMinutes_, disabledSeconds_)
|
||||
|
||||
const getRangeAvaliableTimeEach = (startDate: Dayjs, endDate: Dayjs, role) => {
|
||||
const avaliableMap = {
|
||||
hour: getAvaliableHours,
|
||||
minute: getAvaliableMinutes,
|
||||
second: getAvaliableSeconds,
|
||||
const getRangeAvailableTimeEach = (startDate: Dayjs, endDate: Dayjs, role) => {
|
||||
const availableMap = {
|
||||
hour: getAvailableHours,
|
||||
minute: getAvailableMinutes,
|
||||
second: getAvailableSeconds,
|
||||
}
|
||||
const isStart = role === 'start'
|
||||
let result = isStart ? startDate : endDate
|
||||
const compareDate = isStart ? endDate : startDate;
|
||||
['hour', 'minute', 'second'].forEach(_ => {
|
||||
if (avaliableMap[_]) {
|
||||
let avaliableArr
|
||||
const method = avaliableMap[_]
|
||||
if (availableMap[_]) {
|
||||
let availableArr
|
||||
const method = availableMap[_]
|
||||
if (_ === 'minute') {
|
||||
avaliableArr = method(result.hour(), role, compareDate)
|
||||
availableArr = method(result.hour(), role, compareDate)
|
||||
} else if (_ === 'second') {
|
||||
avaliableArr = method(result.hour(), result.minute(), role, compareDate)
|
||||
availableArr = method(result.hour(), result.minute(), role, compareDate)
|
||||
} else {
|
||||
avaliableArr = method(role, compareDate)
|
||||
availableArr = method(role, compareDate)
|
||||
}
|
||||
if (avaliableArr && avaliableArr.length && !avaliableArr.includes(result[_]())) {
|
||||
const pos = isStart ? 0 : avaliableArr.length - 1
|
||||
result = result[_](avaliableArr[pos])
|
||||
if (availableArr && availableArr.length && !availableArr.includes(result[_]())) {
|
||||
const pos = isStart ? 0 : availableArr.length - 1
|
||||
result = result[_](availableArr[pos])
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -298,11 +298,11 @@ export default defineComponent({
|
||||
ctx.emit('set-picker-option',['isValidValue', isValidValue])
|
||||
ctx.emit('set-picker-option',['handleKeydown', handleKeydown])
|
||||
ctx.emit('set-picker-option',['getDefaultValue', getDefaultValue])
|
||||
ctx.emit('set-picker-option',['getRangeAvaliableTime', getRangeAvaliableTime])
|
||||
ctx.emit('set-picker-option',['getRangeAvailableTime', getRangeAvailableTime])
|
||||
|
||||
const timePickeOptions = {} as any
|
||||
const timePickerOptions = {} as any
|
||||
const onSetOption = e => {
|
||||
timePickeOptions[e[0]] = e[1]
|
||||
timePickerOptions[e[0]] = e[1]
|
||||
}
|
||||
|
||||
const pickerBase = inject('EP_PICKER_BASE') as any
|
||||
|
||||
@ -10,7 +10,7 @@ const makeList = (total, method, methodFunc) => {
|
||||
return arr
|
||||
}
|
||||
|
||||
const makeAvaliableArr = list => {
|
||||
const makeAvailableArr = list => {
|
||||
return list.map((_, index) => !_ ? index : _).filter(_ => _ !== true)
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@ export const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) =>
|
||||
}
|
||||
|
||||
|
||||
export const getAvaliableArrs = (disabledHours, disabledMinutes, disabledSeconds) => {
|
||||
export const getAvailableArrs = (disabledHours, disabledMinutes, disabledSeconds) => {
|
||||
const {
|
||||
getHoursList,
|
||||
getMinutesList,
|
||||
@ -46,22 +46,22 @@ export const getAvaliableArrs = (disabledHours, disabledMinutes, disabledSeconds
|
||||
disabledSeconds,
|
||||
)
|
||||
|
||||
const getAvaliableHours = (role, compare?) => {
|
||||
return makeAvaliableArr(getHoursList(role, compare))
|
||||
const getAvailableHours = (role, compare?) => {
|
||||
return makeAvailableArr(getHoursList(role, compare))
|
||||
}
|
||||
|
||||
const getAvaliableMinutes = (hour, role, compare?) => {
|
||||
return makeAvaliableArr(getMinutesList(hour, role, compare))
|
||||
const getAvailableMinutes = (hour, role, compare?) => {
|
||||
return makeAvailableArr(getMinutesList(hour, role, compare))
|
||||
}
|
||||
|
||||
const getAvaliableSeconds = (hour, minute, role, compare?) => {
|
||||
return makeAvaliableArr(getSecondsList(hour, minute, role, compare))
|
||||
const getAvailableSeconds = (hour, minute, role, compare?) => {
|
||||
return makeAvailableArr(getSecondsList(hour, minute, role, compare))
|
||||
}
|
||||
|
||||
return {
|
||||
getAvaliableHours,
|
||||
getAvaliableMinutes,
|
||||
getAvaliableSeconds,
|
||||
getAvailableHours,
|
||||
getAvailableMinutes,
|
||||
getAvailableSeconds,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -28,6 +28,9 @@ export default defineComponent({
|
||||
focus: () => {
|
||||
commonPicker.value?.handleFocus()
|
||||
},
|
||||
blur: () => {
|
||||
commonPicker.value?.handleBlur()
|
||||
},
|
||||
}
|
||||
|
||||
provide('ElPopperOptions', props.popperOptions)
|
||||
|
||||
@ -106,7 +106,7 @@ Can pick an arbitrary time range.
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | binding value | Date | - | - |
|
||||
| model-value / v-model | binding value | Date | — | — |
|
||||
| readonly | whether TimePicker is read only | boolean | — | false |
|
||||
| disabled | whether TimePicker is disabled | boolean | — | false |
|
||||
| editable | whether the input is editable | boolean | — | true |
|
||||
@ -119,15 +119,15 @@ Can pick an arbitrary time range.
|
||||
| arrow-control | whether to pick time using arrow buttons | boolean | — | false |
|
||||
| align | alignment | left / center / right | left |
|
||||
| popper-class | custom class name for TimePicker's dropdown | string | — | — |
|
||||
| range-separator | range separator | string | - | '-' |
|
||||
| range-separator | range separator | string | — | '-' |
|
||||
| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | HH:mm:ss |
|
||||
| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
|
||||
| name | same as `name` in native input | string | — | — |
|
||||
| prefix-icon | Custom prefix icon class | string | — | el-icon-time |
|
||||
| clear-icon | Custom clear icon class | string | — | el-icon-circle-close |
|
||||
| disabledHours | To specify the array of hours that cannot be selected | function | — | - |
|
||||
| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | - |
|
||||
| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | - |
|
||||
| disabledHours | To specify the array of hours that cannot be selected | function | — | — |
|
||||
| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
|
||||
| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
@ -139,4 +139,5 @@ Can pick an arbitrary time range.
|
||||
### Methods
|
||||
| Method | Description | Parameters |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | focus the Input component | - |
|
||||
| focus | focus the Input component | — |
|
||||
| blur | blur the Input component | — |
|
||||
|
||||
@ -106,7 +106,7 @@ Es posible escoger un rango de tiempo arbitrario.
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
|
||||
| model-value / v-model | valor enlazado | Date | - | - |
|
||||
| model-value / v-model | valor enlazado | Date | — | — |
|
||||
| readonly | si el Time Picker está en modo de sólo lectura | boolean | — | false |
|
||||
| disabled | si el Time Picker se encuentra deshabilitado | boolean | — | false |
|
||||
| editable | si el input puede ser editado | boolean | — | true |
|
||||
@ -119,15 +119,15 @@ Es posible escoger un rango de tiempo arbitrario.
|
||||
| arrow-control | si es posible escoger el tiempo usando los botones de flecha | boolean | — | false |
|
||||
| align | alineación | left / center / right | left | |
|
||||
| popper-class | nombre de clase personalizada para el dropdown del Time Picker | string | — | — |
|
||||
| range-separator | separador de rango | string | - | '-' |
|
||||
| range-separator | separador de rango | string | — | '-' |
|
||||
| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | HH:mm:ss |
|
||||
| default-value | opcional, fecha por defecto del calendario | Fecha para Selector de Tiempo, string para el Seleccionador de Tiempo | cualquier cosa aceptada por `new Date()` para el Selector de Tiempo, Selector de Tiempo, valor seleccionable para el Seleccionador de Tiempo | — |
|
||||
| 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 |
|
||||
| disabledHours | To specify the array of hours that cannot be selected | function | — | - |
|
||||
| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | - |
|
||||
| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | - |
|
||||
| disabled-hours | To specify the array of hours that cannot be selected | function | — | — |
|
||||
| disabled-minutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
|
||||
| disabled-seconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
|
||||
|
||||
|
||||
### Eventos
|
||||
@ -141,3 +141,4 @@ Es posible escoger un rango de tiempo arbitrario.
|
||||
| Metodo | Descripción | Parameteros |
|
||||
| ------ | -------------------------- | ----------- |
|
||||
| focus | coloca el foco en el input | — |
|
||||
| blur | blur the Input component | — |
|
||||
|
||||
@ -107,7 +107,7 @@ Vous pouvez également définir un intervalle libre.
|
||||
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | La valeur liée. | Date | - | - |
|
||||
| model-value / v-model | La valeur liée. | Date | — | — |
|
||||
| readonly | Si TimePicker est en lecture seule. | boolean | — | false |
|
||||
| disabled | Si TimePicker est désactivé. | boolean | — | false |
|
||||
| editable | Si le champ d'input est éditable. | boolean | — | true |
|
||||
@ -120,15 +120,15 @@ Vous pouvez également définir un intervalle libre.
|
||||
| arrow-control | Si les flèches directionnelles peuvent être utilisées | boolean | — | false |
|
||||
| align | Alignement. | left / center / right | left |
|
||||
| popper-class | Classe du menu du TimePicker. | string | — | — |
|
||||
| range-separator | Séparateur d'intervalle. | string | - | '-' |
|
||||
| range-separator | Séparateur d'intervalle. | string | — | '-' |
|
||||
| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | HH:mm:ss |
|
||||
| default-value | Optionnel, date d'aujourd'hui par défaut. | `Date` pour le TimePicker, `string` pour le TimeSelect | Toute valeur acceptée par `new Date()` pour le TimePicker, une valeur sélectionnable pour TimeSelect. | — |
|
||||
| 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 |
|
||||
| disabledHours | To specify the array of hours that cannot be selected | function | — | - |
|
||||
| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | - |
|
||||
| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | - |
|
||||
| disabled-hours | To specify the array of hours that cannot be selected | function | — | — |
|
||||
| disabled-minutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
|
||||
| disabled-seconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
|
||||
|
||||
### Évènements
|
||||
|
||||
@ -142,4 +142,5 @@ Vous pouvez également définir un intervalle libre.
|
||||
|
||||
| Méthode | Description | Paramètres |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | Met le focus sur le composant. | - |
|
||||
| focus | Met le focus sur le composant. | — |
|
||||
| blur | blur the Input component | — |
|
||||
|
||||
@ -106,7 +106,7 @@
|
||||
### 属性
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | バインディング値 | date | - | - |
|
||||
| model-value / v-model | バインディング値 | date | — | — |
|
||||
| readonly | タイムピッカーが読み取り専用かどうか | boolean | — | false |
|
||||
| disabled | タイムピッカーが無効になっているかどうか | boolean | — | false |
|
||||
| editable | 入力が編集可能かどうか | boolean | — | true |
|
||||
@ -119,15 +119,15 @@
|
||||
| arrow-control | 矢印ボタンを使って時間を選択するかどうか| boolean | — | false |
|
||||
| align | 整列 | left / center / right | left |
|
||||
| popper-class | タイムピッカーのドロップダウンのカスタムクラス名 | string | — | — |
|
||||
| range-separator | 範囲セパレータ | string | - | '-' |
|
||||
| range-separator | 範囲セパレータ | string | — | '-' |
|
||||
| format | format of the displayed value in the input box | string | see [date formats](#/en-US/component/date-picker#date-formats) | HH:mm:ss |
|
||||
| default-value | オプション、カレンダーのデフォルトの日付 | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
|
||||
| name | ネイティブ入力の `name` と同じ | string | — | — |
|
||||
| prefix-icon | カスタムプレフィックスアイコンクラス | string | — | el-icon-time |
|
||||
| clear-icon | カスタムクリアアイコンクラス | string | — | el-icon-circle-close |
|
||||
| disabledHours | To specify the array of hours that cannot be selected | function | — | - |
|
||||
| disabledMinutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | - |
|
||||
| disabledSeconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | - |
|
||||
| disabled-hours | To specify the array of hours that cannot be selected | function | — | — |
|
||||
| disabled-minutes | To specify the array of minutes that cannot be selected | function(selectedHour) | — | — |
|
||||
| disabled-seconds | To specify the array of seconds that cannot be selected | function(selectedHour, selectedMinute) | — | — |
|
||||
|
||||
|
||||
### イベント
|
||||
@ -140,4 +140,5 @@
|
||||
### 方法
|
||||
| Method | Description | Parameters |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | インプットコンポーネントにフォーカス | - |
|
||||
| focus | インプットコンポーネントにフォーカス | — |
|
||||
| blur | blur the Input component | — |
|
||||
|
||||
@ -120,15 +120,15 @@
|
||||
| arrow-control | 是否使用箭头进行时间选择 | boolean | — | false |
|
||||
| align | 对齐方式 | string | left / center / right | left |
|
||||
| popper-class | TimePicker 下拉框的类名 | string | — | — |
|
||||
| range-separator | 选择范围时的分隔符 | string | - | '-' |
|
||||
| range-separator | 选择范围时的分隔符 | string | — | '-' |
|
||||
| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | HH:mm:ss |
|
||||
| default-value | 可选，选择器打开时默认显示的时间 | Date(TimePicker) / string(TimeSelect) | 可被`new Date()`解析(TimePicker) / 可选值(TimeSelect) | — |
|
||||
| name | 原生属性 | string | — | — |
|
||||
| prefix-icon | 自定义头部图标的类名 | string | — | el-icon-time |
|
||||
| clear-icon | 自定义清空图标的类名 | string | — | el-icon-circle-close |
|
||||
| disabledHours | 禁止选择部分小时选项 | function | — | - |
|
||||
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | — | - |
|
||||
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | — | - |
|
||||
| disabled-hours | 禁止选择部分小时选项 | function | — | — |
|
||||
| disabled-minutes | 禁止选择部分分钟选项 | function(selectedHour) | — | — |
|
||||
| disabled-seconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | — | — |
|
||||
|
||||
### Events
|
||||
| 事件名 | 说明 | 参数 |
|
||||
@ -140,4 +140,5 @@
|
||||
### Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| focus | 使 input 获取焦点 | - |
|
||||
| focus | 使 input 获取焦点 | — |
|
||||
| blur | 使 input 失去焦点 | — |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user