element 日期选择器限制精确到时分秒+展开默认选择一个时间

一、日期选择最小时间为当前时间十分钟后

需求：1.日期不能小于当前日期
2.限制最小时间为当前时间十分钟后（当前时间：2022-11-24 15:10:00 最小时间：2022-11-24 15:20:00）
3.点击默认给一个时间，时间为后一天
4.日历起始日期为周一

<el-date-picker
   v-model="value3"
   type="datetime"
   placeholder="选择日期时间"
   :default-value="timeDefaultShow"
   :picker-options="startPickerOptions"
   value-format="yyyy-MM-dd HH:mm:ss"
   @focus="clicktime"
 />

 data() {
    return {
      value3: '',
      timeDefaultShow: '', // 默认时间
      startPickerOptions: {
        firstDayOfWeek: 1, // 周起始日设置为周一
        disabledDate(time) {
          const dateTime = new Date()
          const startDateTime = dateTime.setDate(dateTime.getDate() - 1)
          return (
          	// 不能选择小于今天的日期
            time.getTime() < new Date(startDateTime).getTime() 
          )
        },
        selectableRange: "00:00:00 - 23:59:59",
      },
   }
},
// 监听时间，控制时分
 watch: {
    "value3": {
      handler(newValue, oldValue) {
        if (newValue) {
          let date = new Date(); // 当前时间
          let min = date.getMinutes();
          date.setMinutes(min + 10); // 设置最小时间，当前时间十分钟后
          let nowDate = this.moment(date).format("HH:mm:ss"); // 当前十分钟后的时间
          let st = "";
          if (this.moment(date).format("yyyy-MM-DD") === this.moment(newValue).format("yyyy-MM-DD")) {
            let hh1 = this.moment(newValue).format("HH:mm:ss") // 选择时间的时分秒
            // 判断当前选中的时间是不是小于十分钟后的时间，小于则赋值十分钟后的时间
            if(hh1 < nowDate) { 
              this.value3 = date
            }
            st = nowDate;
          } else {
            st = "00:00:00";
          }
          this.startPickerOptions.selectableRange =st  + " - 23:59:59";
          this.startPickerOptions = this.startPickerOptions;
        }
      },
      deep: true,
      immediate: true,
   }
},
methods: {
   clicktime() {
   	// 点击时先判断有没有值，没有值默认给后一天时间（具体时间根据需求来）
     if (!this.value3) {
       this.timeDefaultShow = new Date()
       this.timeDefaultShow.setDate(new Date().getDate() + 1)
       this.value3 = this.timeDefaultShow
     }
   }
 }

示例图

二、日期选择限制不能超过当前时间

<el-date-picker
  v-model.trim="value2"
   :picker-options="pickerOptions"
   type="datetime"
   placeholder="请选择"
   value-format="yyyy-MM-dd HH:mm:ss"
 />

data() {
	return {
		value2: '',
      	pickerOptions: {
        	disabledDate(time) {
          		return time.getTime() > Date.now();
        	},
        	selectableRange: "00:00:00 - 23:59:59",
      	},
	}
}
// 控制他的时分秒
watch: {
    "value2": {
      handler(newValue, oldValue) {
        if (newValue) {
          let date = new Date();
          let nowDate = this.moment(date).format("HH:mm:ss");
          let st = "";
          if (this.moment(date).format("yyyy-MM-DD") === this.moment(newValue).format("yyyy-MM-DD")) {
            let hh1 = this.moment(newValue).format("HH:mm:ss")
            if(hh1 > nowDate) {
              this.value2 = new Date();
            }
            st = nowDate;
          } else {
            st = "23:59:59";
          }
          this.pickerOptions.selectableRange = "00:00:00 - " + st;
          this.pickerOptions = this.pickerOptions;
        }
      },
      deep: true,
      immediate: true,
    },
}

示例图