Element UI参考手册
组件
TimePicker 时间选择器
TimePicker 时间选择器
用于选择或输入日期
固定时间点
提供几个固定的时间点供用户选择
使用 el-time-select 标签,分别通过star
、end
和step
指定可选的起始时间、结束时间和步长
<el-time-select
v-model="value1"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}"
placeholder="选择时间">
</el-time-select>
<script>
export default {
data() {
return {
value1: ''
};
}
}
</script>
任意时间点
可以选择任意时间
使用 el-time-picker 标签,通过selectableRange
限制可选时间范围。提供了两种交互方式:默认情况下通过鼠标滚轮进行选择,打开arrow-control
属性则通过界面上的箭头进行选择。
<template>
<el-time-picker
v-model="value2"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="任意时间点">
</el-time-picker>
<el-time-picker
arrow-control
v-model="value3"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
placeholder="任意时间点">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value2: new Date(2016, 9, 10, 18, 40),
value3: new Date(2016, 9, 10, 18, 40)
};
}
}
</script>
固定时间范围
若先选择开始时间,则结束时间内备选项的状态会随之改变
<template>
<el-time-select
placeholder="起始时间"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
end: '18:30'
}">
</el-time-select>
<el-time-select
placeholder="结束时间"
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>
任意时间范围
可选择任意的时间范围
至
至
添加is-range
属性即可选择时间范围,同样支持arrow-control
属性。
<template>
<el-time-picker
is-range
v-model="value4"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
<el-time-picker
is-range
arrow-control
v-model="value5"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
</template>
<script>
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)]
};
}
}
</script>
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 |
是否为时间范围选择,仅对<el-time-picker>有效 |
boolean |
— |
false |
arrow-control |
是否使用箭头进行时间选择,仅对<el-time-picker>有效 |
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 获取焦点 |
- |
组件相关
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型