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时之后的时分秒当选择非最小日期时，可以选择任意时分秒
相关问题请指正，欢迎留言讨论！
