两个element时间选择框,怎么让第二个选的时间不能早于第一个的,如果早于第一个则提示
用change去监听,选择后对比第一个选择框的时间再做判断
选择后 转时间戳
<template>
<div>
<el-time-select
placeholder="起始时间"
v-model="startTime"
>
</el-time-select>
<el-time-select
placeholder="结束时间"
v-model="endTime" @change="endTimeChange">
</el-time-select>
</div>
</template>
<script>
export default {
data() {
return {
startTime: '',
endTime: ''
};
},
methods:{
endTimeChange(){
new Date(this.endTime).getTime() < new Date(this.startTime).getTime()?this.$message.error('第二个时间早于第一个'):''
}
}
}
</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>
文档里有
思路:
第一种:
选择第二个时间时候加判断,时间大于第一次就return, 第二次选择时间清空
第二种:
选择完第一次时间之后,就用picker-options 属性将第一次时间之前的禁止选择
参考案例:
我提供的案例是禁止今日之前的时间选择,你需要更改一下,当第一次时间选择之后更改一下时间字段
<template>
<div>
<el-date-picker
:disabled="isDisabled"
:editable="false"
:clearable = "true"
v-model="starttime"
time-arrow-control
:picker-options="{
disabledDate: time => {
return time.getTime() < Date.now() - 3600 * 1000 * 24
},
selectableRange: startTimeRange
}"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始日期"
/>
</div>
</template>
<script>
import moment from 'moment'
export default {
data() {
return {
starttime:''
}
},
watch: {
starttime:{
handler(newValue, oldValue) {
console.log(oldValue);
if(newValue){
let nowDate = moment().format('YYYY-MM-DD HH:mm:ss');
let dt = nowDate.split(" ");
let st = '';
if(newValue.split(" ")[0] == dt[0]){
// 是今天,选择 的时间开始为此刻的时分秒
st = dt[1];
}else{
// 明天及以后从0时开始
st = '00:00:00';
}
this.startTimeRange = st + ' - 23:59:59';
//例如:如果今天此刻时间为10:41:40 则选择时间范围为: 10:41:40 - 23:59:59
//否则为:00:00:00- 23:59:59
}
}
}
},
}
</script>
<style scoped>
</style>
```