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

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时之后的时分秒
  • 当选择非最小日期时，可以选择任意时分秒
    
    

---

相关问题请指正，欢迎留言讨论！