mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-12-06 06:08:28 +08:00
4.0 KiB
4.0 KiB
TimePicker 时间选择器
用于选择或输入日期
固定时间点
提供几个固定的时间点供用户选择
:::demo 使用 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>
:::
任意时间点
可以选择任意时间
:::demo 使用 el-time-picker 标签,通过selectableRange
限制可选时间范围
<template>
<el-time-picker
v-model="value2"
: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)
};
}
}
</script>
:::
固定时间范围
若先选择开始时间,则结束时间内备选项的状态会随之改变
:::demo
<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>
:::
任意时间范围
可选择任意的时间范围
:::demo 添加is-range
属性即可选择时间范围
<template>
<el-time-picker
is-range
v-model="value3"
placeholder="选择时间范围">
</el-time-picker>
</template>
<script>
export default {
data() {
return {
value3: [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 |
placeholder | 占位内容 | string | — | — |
format | 时间格式化(TimePicker) | string | 小时:HH ,分:mm ,秒:ss |
'HH:mm:ss' |
value | 绑定值 | TimePicker: Date TimeSelect: String |
- | - |
align | 对齐方式 | string | left, center, right | left |
picker-options | 当前时间日期选择器特有的选项 参考下表 |
object | — | {} |
Time Select Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
start | 开始时间 | string | — | 09:00 |
end | 结束时间 | string | — | 18:00 |
step | 间隔时间 | string | — | 00:30 |
minTime | 最小时间,小于该时间的时间段将被禁用 | string | — | 00:00 |
Time Picker Options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
selectableRange | 可选时间段,例如'18:30:00 - 20:30:00' 或者传入数组 ['09:30:00 - 12:00:00', '14:30:00 - 18:30:00'] |
string/array | — | — |