1、基础范围控制(只控制日期,不含时分秒)
<template>
<el-date-picker
type="datetime"
v-model="startDate"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始时间"
size="mini" style="width: 250px;"
:picker-options="startPickerOptions">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
startDate:'',//时间
minTime:1618891200000,//时间戳,对应时间为:'2021-04-20 12:00:00'
maxTime:1619323200000,//时间戳,对应时间为:'2021-04-25 12:00:00'
startPickerOptions:{
disabledDate: (time) => {
//小于最小时间或者大于最大时间都不可选
return time.getTime() < this.minTime-24*3600000|| time.getTime() > this.maxTime;
}
}
}
},
</script>
-
效果如下
- 存在一个问题:我们设置的最小时间是
2021-04-20
,实际上最小时间是2021-04-21
- 存在一个问题:我们设置的最小时间是
-
解决
- 原因:控件会取每个日期的
00:00:00
作为判断条件,如2021-04-20
会被认为是2021-04-20 00:00:00
。解析成时间戳为1618848000000
,小于2021-04-20 00:00:00
的时间戳1618891200000
,所以不可选 - 处理:将最小日期减一天
- 原因:控件会取每个日期的
startPickerOptions:{
disabledDate: (time) => {
// 最小时间减一天,防止当天日期无法选择
return time.getTime() < this.minTime-24*3600000|| time.getTime() > this.maxTime;
}
}
精确控制(控制时分秒)
- 动态计算可选范围
computed:{
startPickerOptions(){
//选择的日期
let curDate = this.$moment(this.startDate).format("YYYY-MM-DD");
//最小日期
let minDate = this.$moment(this.minTime).format("YYYY-MM-DD");
//前推一天,防止当天日期无法选择
let preTime = this.minTime-24*3600000;
// 如果选择的日期为最小日期,则设置为最小日期的时分秒
let str = "";
if(curDate == minDate){
str = this.$moment(this.minTime).format("HH:mm:ss");
}else{
str = "00:00:00"
}
return {
disabledDate: (time) => {
return time.getTime() < preTime || time.getTime() > this.maxTime;
},
selectableRange: str + " - 23:59:59"
}
},
},
- 效果如下
- 当选择最小日期时,只能选择12时之后的时分秒
- 当选择非最小日期时,可以选择任意时分秒
相关问题请指正,欢迎留言讨论!