el-date-picker 日期时间进行限制，精确到时分秒；日期时间范围选择限制；

参考文档链接

一、设置可选时间范围为 当前日期 当前时间 10分钟以后 的时间

1、HTML代码

<el-date-picker
      v-model="form.publishTime"
      type="datetime"
      format="yyyy-MM-dd HH:mm:ss"
      start=""
      :picker-options="startPickerOptions"
      @change="handle"
      placeholder=""
    >
    </el-date-picker>

2、脚本代码

<script>
import moment from 'moment'

export default {
  data() {
    return {
      form: {
        publishTime: ''
      },
      startPickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000 // 禁用超过当前时间的日期
        },
        selectableRange: '00:00:00 - 23:59:59' //这个加上之后，时分秒上面才有禁止选择变灰，如果不加，也可以禁止选择，但是不会变灰
      }
    }
  },

  watch: {
    'form.publishTime': {
      handler(newValue, oldValue) {
        if (newValue) {
          let date = new Date()
          let min = date.getMinutes()
          date.setMinutes(min + 1) //这里加1分钟，是为了解决值改变后，系统秒数就过期限制了，无法点击“此刻”按钮， 如果监听 “系统时间”的改变，则会影响性能。
          let nowDate = moment(date).format('HH:mm:ss')
          let st = ''
          // 如果当前日期  等于 选中日期 十分钟做限制 并修改可选范围
          if (
            moment(date).format('yyyy-MM-DD') ===
            moment(newValue).format('yyyy-MM-DD')
          ) {
            let hh1 = moment(newValue).format('HH:mm:ss')
            // 如果 选中日期时分秒 小于当前日期 时分秒
            if (hh1 < nowDate) {
              // 重新赋值为当前时间10分钟后 日期时间
              let times = new Date(new Date().getTime() + 10 * 60 * 1000)
              this.form.publishTime = this.handleTime(times, 0)
            }
            // 获取当前日期十分钟后 时间
            let _date = new Date(new Date().getTime() + 10 * 60 * 1000)
            let _nowDate = moment(_date).format('HH:mm:ss')
            st = _nowDate
          } else {
            st = '00:00:00'
          }
          this.startPickerOptions.selectableRange = st + ' - 23:59:59'
          this.startPickerOptions = this.startPickerOptions
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 处理时间
    handleTime($event, rowData) {
      if (!$event) {
        return null
      }
      var date = new Date($event) //当前时间
      var month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1 //月

      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      // var day = this.zeroFill(date.getDate()); //日
      let hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      let mf =
        date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      let ss =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      if (rowData == 0) {
        var curTime =
          date.getFullYear() +
          '-' +
          month +
          '-' +
          day +
          ' ' +
          hh +
          ':' +
          mf +
          ':' +
          ss
      } else {
        var curTime = date.getFullYear() + '-' + month + '-' + day
      }
      return curTime
    }
  }
}
</script>

二、设置只能选择当前日期 当前时间 之前的时间

1.HTML 

  <el-date-picker
        v-model="form.beginTime"
        type="datetime"
        :placeholder="开始时间"
        align="right"
        :picker-options="startPickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
            >
</el-date-picker>

2、脚本代码

<script>
import moment from 'moment'

export default {
  data() {
    return {
      startPickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 禁用超过当前时间的日期
        },
        selectableRange: "00:00:00 - 23:59:59",//这个加上之后，时分秒上面才有禁止选择变灰，如果不加，也可以禁止选择，但是不会变灰
      },
    }
  },

 watch:{
   "form.beginTime": {
      handler(newValue, oldValue) {
        if (newValue) {
          let date = new Date();
          let min = date.getMinutes();
          date.setMinutes(min + 1); //这里加1分钟，是为了解决值改变后，系统秒数就过期限制了，无法点击“此刻”按钮， 如果监听 “系统时间”的改变，则会影响性能。
          let nowDate = moment(date).format("HH:mm:ss");
          let st = "";
          if (moment(date).format("yyyy-MM-DD") === moment(newValue).format("yyyy-MM-DD")){
            let hh1 = moment(newValue).format("HH:mm:ss")
            if(hh1 > nowDate) {
              this.form.beginTime = new Date();
            }
            st = nowDate;
          } else {
            st = "23:59:59";
          }
          this.startPickerOptions.selectableRange = "00:00:00 - " + st;
          this.startPickerOptions = this.startPickerOptions;
        }
      },
      deep: true,
      immediate: true,
    },
},
  
}
</script>

三、日期时间范围选择，限制 当前日期 一个月前 的范围可选；

例如当前日期是2024.8.9号，可选时间范围是 2024-07-07 00:00:00 ~ 2024-08-09 23:59:59;

1、HTML代码

<el-date-picker
      v-model="timeRange"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
    >
    </el-date-picker>

2、脚本代码

export default {
  data() {
    return {
      timeRange: null,
      pickerOptions: {
        disabledDate(time) {
          function startTime() {
            const currentDate = new Date()
            // 获取当前日期的年份和月份
            const year = currentDate.getFullYear()
            const month = currentDate.getMonth() // 注意：月份是从0开始的，0表示1月，11表示12月
            // 创建一个新的日期对象，设置为上一个月
            const lastMonthDate = new Date(
              year,
              month - 1,
              currentDate.getDate()
            )
            // 返回上一个月的日期
            return lastMonthDate
          }
          function endTime() {
            let date = new Date(),
              year = date.getFullYear(), //获取完整的年份(4位)
              month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
              strDate = date.getDate() // 获取当前日(1-31)
            if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
            if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
            return `${year}-${month}-${strDate} 23:59:59`
          }
          return (
            time.getTime() < new Date(startTime()).getTime() ||
            time.getTime() > new Date(endTime()).getTime()
          )
        }
      }
    }
  },

 
}