elementui 开始时间结束时间
时间: 2025-04-16 14:40:38 浏览: 35
### ElementUI 开始时间 结束时间 使用方法 示例
#### TimePicker 组件中的开始时间和结束时间限制
对于 `el-time-picker` 组件,可以利用内置属性实现开始时间不得大于结束时间的功能。具体来说,在两个时间选择器之间建立联动关系,确保第一个时间选择器的选择不会超过第二个时间选择器所设定的最大值。
```html
<template>
<div class="demo">
<el-form :model="form" label-width="80px">
<el-form-item label="起始时间">
<el-time-select
v-model="form.startTime"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00',
maxTime: form.endTime,
}"
placeholder="选择时间">
</el-time-select>
</el-form-item>
<el-form-item label="结束时间">
<el-time-select
v-model="form.endTime"
:picker-options="{
start: '00:00',
step: '00:15',
end: '24:00',
minTime: form.startTime,
}"
placeholder="选择时间">
</el-time-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
startTime: '',
endTime: ''
}
};
},
};
</script>
```
此示例展示了如何通过 `maxTime` 和 `minTime` 属性来约束两个时间选择框之间的相互依赖关系[^1]。
#### DatePicker 组件中的日期区间限制
当涉及到更复杂的场景如日期加时间段的选择时,则需借助于 `el-date-picker` 及其关联逻辑处理。下面的例子说明了怎样基于选定的具体某一天来限定允许被挑选的时间段:
```javascript
// JavaScript部分
data() {
return {
selectedDate: '', // 用户选择的特定日期
timeRange: {start: null, end: null}, // 时间范围对象
}
},
methods: {
handleDateChange(value) {
this.selectedDate = value;
const now = new Date();
let chosenDay = new Date(this.selectedDate);
// 设置当天零点作为最小可选时刻
this.timeRange.start = `${chosenDay.getFullYear()}-${String(chosenDay.getMonth()+1).padStart(2,'0')}-${String(chosenDay.getDate()).padStart(2,'0')}T00:00`;
// 如果选择了未来的日子,则最大可以选择至该日的最后一刻;
// 否则默认截止到当前时刻之前。
if (now <= chosenDay){
this.timeRange.end =`${chosenDay.getFullYear()}-${String(chosenDay.getMonth()+1).padStart(2,'0')}-${String(chosenDay.getDate()).padStart(2,'0')}T23:59`;
}else{
this.timeRange.end = now.toISOString().slice(0,16);
}
}
}
```
配合模板内的相应绑定:
```html
<!-- HTML 部分 -->
<div id="app">
<!-- ...其他代码省略... -->
<el-date-picker
v-model="selectedDate"
type="date"
@change="handleDateChange"
format="yyyy-MM-dd"
placeholder="请选择日期"></el-date-picker>
<el-time-picker
is-range
v-model="timeRange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
placement="bottom-end">
</el-time-picker>
<!-- ...其他代码省略... -->
</div>
```
这段代码实现了根据用户选择的不同日期自动调整可用的时间段选项,并且保证任何情况下都不会违反“早于等于晚”的原则[^3]。
阅读全文
相关推荐




















