elementui DateTimePicker组件限制时间范围（包含时分秒）

article/2025/9/20 19:31:51

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,//时间戳，对应时间为：'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"}},},