TimePicker 时间选择器

TimePicker 时间选择器

用于选择或输入日期

固定时间点

提供几个固定的时间点供用户选择

使用 el-time-select 标签，分别通过star、end和step指定可选的起始时间、结束时间和步长

v-model="value1"

:picker-options="{

start: '08:30',

step: '00:15',

end: '18:30'

}"

placeholder="选择时间">

export default {

data() {

return {

value1: ''

};

}

}

任意时间点

可以选择任意时间

使用 el-time-picker 标签，通过selectableRange限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择。

v-model="value2"

:picker-options="{

selectableRange: '18:30:00 - 20:30:00'

}"

placeholder="任意时间点">

arrow-control

v-model="value3"

:picker-options="{

selectableRange: '18:30:00 - 20:30:00'

}"

placeholder="任意时间点">

export default {

data() {

return {

value2: new Date(2016, 9, 10, 18, 40),

value3: new Date(2016, 9, 10, 18, 40)

};

}

}

固定时间范围

若先选择开始时间，则结束时间内备选项的状态会随之改变

placeholder="起始时间"

v-model="startTime"

:picker-options="{

start: '08:30',

step: '00:15',

end: '18:30'

}">

placeholder="结束时间"

v-model="endTime"

:picker-options="{

start: '08:30',

step: '00:15',

end: '18:30',

minTime: startTime

}">

export default {

data() {

return {

startTime: '',

endTime: ''

};

}

}

任意时间范围

可选择任意的时间范围

至

至

添加is-range属性即可选择时间范围，同样支持arrow-control属性。

is-range

v-model="value4"

range-separator="至"

start-placeholder="开始时间"

end-placeholder="结束时间"

placeholder="选择时间范围">

is-range

arrow-control

v-model="value5"

range-separator="至"

start-placeholder="开始时间"

end-placeholder="结束时间"

placeholder="选择时间范围">

export default {

data() {

return {

value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],

value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]

};

}

}

Attributes

参数

说明

类型

可选值

默认值

readonly

完全只读

boolean

—

false

disabled

禁用

boolean

—

false

editable

文本框可输入

boolean

—

true

clearable

是否显示清除按钮

boolean

—

true

size

输入框尺寸

string

medium / small / mini

—

placeholder

非范围选择时的占位内容

string

—

—

start-placeholder

范围选择时开始日期的占位内容

string

—

—

end-placeholder

范围选择时结束日期的占位内容

string

—

—

is-range

是否为时间范围选择，仅对有效

boolean

—

false

arrow-control

是否使用箭头进行时间选择，仅对有效

boolean

—

false

value

绑定值

date(TimePicker) / string(TimeSelect)

—

—

align

对齐方式

string

left / center / right

left

popper-class

TimePicker 下拉框的类名

string

—

—

picker-options

当前时间日期选择器特有的选项参考下表

object

—

{}

range-separator

选择范围时的分隔符

string

-

'-'

value-format

可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象

string

见日期格式

—

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

Time Select Options

参数

说明

类型

可选值

默认值

start

开始时间

string

—

09:00

end

结束时间

string

—

18:00

step

间隔时间

string

—

00:30

minTime

最小时间，小于该时间的时间段将被禁用

string

—

00:00

maxTime

最大时间，大于该时间的时间段将被禁用

string

—

—

Time Picker Options

参数

说明

类型

可选值

默认值

selectableRange

可选时间段，例如'18:30:00 - 20:30:00'或者传入数组['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']

string / array

—

—

format

时间格式化(TimePicker)

string

小时：HH，分：mm，秒：ss，AM/PM A

'HH:mm:ss'

Events

事件名

说明

参数

change

用户确认选定的值时触发

组件绑定值

blur

当 input 失去焦点时触发

组件实例

focus

当 input 获得焦点时触发

组件实例

Methods

方法名

说明

参数

focus

使 input 获取焦点

-