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;
       }
}

精確控制（控制時分秒）

• 動態(tài)計算可選范圍

    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時之后的時分秒
  • 當選擇非最小日期時，可以選擇任意時分秒
    
    

相關(guān)問題請指正，歡迎留言討論！