Requirements: Start time and end time are two items, the start time is greater than the current time, the end time is greater than the start time, accurate to the time.
html code:
<el-date-picker
v-model="bgnDate"
type="datetime"
placeholder="开始日期"
:picker-options="pickerOptions0"
@change="changetime">
</el-date-picker>
至
<el-date-picker
v-model="endDate"
type="datetime"
placeholder="结束日期"
:picker-options="pickerOptions1"
:default-time="defaultTime"
@change="endTimeChange"
>
</el-date-picker>
The limit start time is greater than the current time (but the current day is optional)
data(){
return{
bgnDate:'',
endDate:'',
pickerOptions0: {
disabledDate: (time) => {
return time.getTime() < Date.now() - 8.64e7;
}
},
}
}
Limit end time
computed:{
//默认结束时间
defaultTime(){
if(!this.bgnDate){
return
}
let hours = this.bgnDate.getHours();//时
let min = this.bgnDate.getMinutes();//分
let second = this.bgnDate.getSeconds();//秒
//默认比开始时间多一秒
return hours+':'+min+':'+(second+1)
},
//结束时间限制规则
pickerOptions1(){
if(!this.bgnDate){
return
}
//前推一天，防止当天日期无法选择
let hours = this.bgnDate.getHours();//时
let min = this.bgnDate.getMinutes();//分
let second = this.bgnDate.getSeconds();//秒
//如果开始时间是0点的话则不用再减一天，如果不是0点则减一天，防止结束时间不能选开始时间这一天
let preTime =hours == '00'&&min == '00'&&second == '00'?
new Date(this.bgnDate).getTime() :
new Date(this.bgnDate).getTime() - 8.64e7;
let str = ""
let k = false
if(this.endDate){
//判断结束时间和开始时间是否是同一天
k = (this.bgnDate.getFullYear() ==this.endDate.getFullYear()) &&
(this.bgnDate.getMonth() ==this.endDate.getMonth()) &&
(this.bgnDate.getDate() ==this.endDate.getDate())
}
//如果是同一天，则秒数+1
if(k){
let hours = this.bgnDate.getHours();//时
let min = this.bgnDate.getMinutes();//分
let second = this.bgnDate.getSeconds();//秒
str=hours+':'+min+':'+ (second+1)
}else{
str = "00:00:00"
}
return {
//控制日期不可选开始时间之前
disabledDate: (time) => {
return time.getTime() < preTime ;
},
//控制时间只能选以上代码限制的部分
selectableRange: str + " - 23:59:59"
}
},
}
At this point, it is reasonable to say that there is no problem, but one thing I don’t understand is that after multiple selections of the start time, the default time of the end time will not be updated. It takes two clicks to update. If you only click once, click OK immediately. The time limit for doing it is invalid, as shown in the figure
I didn't find out why, so I made a limit in the change event of the end time (more troublesome)
methods: {
//控制结束时间大于开始时间
endTimeChange(val){
if(!this.bgnDate){
this.$message('请先选择开始时间')
this.endDate = ''
return
}
//通过比较时间戳，如果结束时间小与开始时间
if(new Date(val).getTime()<=new Date(this.bgnDate).getTime()){
let year = new Date(val).getFullYear();//年
let month = new Date(val).getMonth();//月
let day = new Date(val).getDate();//日
let hours = new Date(this.bgnDate).getHours();//时
let min = new Date(this.bgnDate).getMinutes();//分
let second = new Date(this.bgnDate).getSeconds()+1;//秒
//取已选择的结束时间的日期，和已选择的开始时间的时刻秒数+1，实现结束日期一定大于开始日期
let time = year.toString() +'-'+
((month + 1) > 9 ? (month + 1).toString() : "0" + (month + 1).toString()) +'-'+
(day > 9 ? day.toString() : ("0" + day).toString())
+ " " +
(hours > 9 ? hours.toString() : ("0" + hours).toString()) + ":" +
(min > 9 ? min.toString() : ("0" + min).toString()) + ":" +
(second > 9 ? second.toString() : ("0" + second).toString());
//转化成需要的格式
this.endDate = new Date(time)
}
},
}
So far, the requirement has been fulfilled, and I hope that one day I will know where I am wrong