1、基础范围控制(只控制日期,不含时分秒)
<template><el-date-pickertype="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,//时间戳,对应时间为:'-04-20 12:00:00'maxTime:1619323200000,//时间戳,对应时间为:'-04-25 12:00:00'startPickerOptions:{disabledDate: (time) => {//小于最小时间或者大于最大时间都不可选return time.getTime() < this.minTime-24*3600000|| time.getTime() > this.maxTime;}}}},</script>
效果如下
存在一个问题:我们设置的最小时间是-04-20
,实际上最小时间是-04-21
解决
原因:控件会取每个日期的00:00:00
作为判断条件,如-04-20
会被认为是-04-20 00:00:00
。解析成时间戳为1618848000000
,小于-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时之后的时分秒当选择非最小日期时,可以选择任意时分秒
相关问题请指正,欢迎留言讨论!