如何给element el-date-picker日期组件设置时间按照时间禁用

选择当前日期之后的日期 之前的不能够选择当前日期之前的

效果如下

<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="开始日期" prop="time1">
        <el-date-picker
          v-model="ruleForm.time1"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="setTime1"
          type="date"
          placeholder="选择日期"
        />
      el-form-item>
      <el-form-item label="结束日期" prop="time2">
        <el-date-picker
          v-model="ruleForm.time2"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="setTime2"
          type="date"
          placeholder="选择日期"
        />
      el-form-item>
    el-form>
  div>
template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        time1: '',
        time2: ''
      },
      rules: {
        time1: [{ required: true, message: '请选择', trigger: 'blur' }],
        time2: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      setTime1: {
        disabledDate: time => {
          return time.getTime() + 24 * 60 * 60 * 1000 < Date.now()
        }
      },
      setTime2: {
        disabledDate: time => {
          return time.getTime() + 24 * 60 * 60 * 1000 < Date.now()
        }
      }
    }
  }
}
script>

<style lang="scss" scoped>style>

script>

如果是两个选项 有开始日期 和结束日期 需要结束日期在开始日期之后 方法一在提交的时候做判断可以这样做 方法二 禁用 会在下文讲到

if (this.ruleForm.time1>this.ruleForm.time2) {
       this.$message.error('结束日期不能在开始日期之前')
       return;
}

时间跨度为七天的禁用

<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="开始日期" prop="time1">
        <el-date-picker
          v-model="ruleForm.time1"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="setTime1"
          type="date"
          placeholder="选择日期"
        />
      el-form-item>
      <el-form-item label="结束日期" prop="time2">
        <el-date-picker
          v-model="ruleForm.time2"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="setTime2"
          type="date"
          placeholder="选择日期"
        />
      el-form-item>
    el-form>
  div>
template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        time1: '',
        time2: ''
      },
      rules: {
        time1: [{ required: true, message: '请选择', trigger: 'blur' }],
        time2: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      setTime1: {
        disabledDate: time => {
          if (this.ruleForm.time2) {
            // 判断结束时间是否有值 有值的话 从结束时间往前推七天 是开始时间的可选值
            return (
              // 结束时间小于开始时间时禁用  也就是结束时间不能在开始时间之前
              new Date(this.ruleForm.time2).getTime() < time.getTime() ||
              new Date(this.ruleForm.time2).getTime() > time.getTime() + 1000 * 3600 * 24 * 7
            )
          }
        }
      },
      setTime2: {
        disabledDate: time => {
          if (this.ruleForm.time1) {
            // 判断开始时间是否有值 有值的话 从开始时间往后推七天 是结束时间的可选值
            return (
              // 开始时间大于开始时间时禁用  也就是结束时间不能在开始时间之前
              new Date(this.ruleForm.time1).getTime() > time.getTime() ||
              new Date(this.ruleForm.time1).getTime() < time.getTime() - 1000 * 3600 * 24 * 7
            )
          }
        }
      }
    }
  }
}
script>

时间跨度为七天 不能选择当前时间之后的时间 使用单个时间选择器

<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="开始日期" prop="time1">
        <el-date-picker
          v-model="ruleForm.time1"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="setTime1"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      el-form-item>
    el-form>
  div>
template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        time1: ''
      },
      rules: {
        time1: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      timeOne: '',
      setTime1: {
        // 监听每一次选择日期的事件
        onPick: ({ maxDate, minDate }) => {
          // 最大时间  最小时间
          this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期
          // // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.timeOne = ''
        },
        disabledDate: time => {
          if (this.timeOne) {
            const WEEK = 6 * 24 * 3600 * 1000 // 这里乘以6相当于 限制7天以内
            const minTime = this.timeOne - WEEK // 七天之前
            const maxTime = this.timeOne + WEEK // 七天之后
            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime() > new Date()
          } else {
            return time.getTime() > new Date()
          }
        }
      }
    }
  }
}
script>

<style lang="scss" scoped>style>

时间禁用 只能选择当前时间之后的日期和时间

<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="开始日期" prop="time1">
        <el-date-picker
          v-model="ruleForm.time1"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="setTime1"
          type="datetime"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleChange"
        />
      el-form-item>
    el-form>
  div>
template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      ruleForm: {
        time1: ''
      },
      rules: {
        time1: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      timeOne: '',
      setTime1: {
        disabledDate: time => {
          return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000
        },
        selectableRange: '10:00:00 - 23:59:59'
      }
    }
  },
  watch: {
    ruleForm: {
      handler() {
        this.selectable()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleChange(val) {
      console.log(val)
      // this.selectable()
    },
    // 可选的时间范围
    selectable() {
      const date = moment(this.ruleForm.time1).startOf('day').format('x')
      const nowDate = moment().startOf('day').format('x')
      // 如果选择的是今天 则需要禁用已经过去的时间节点
      if (date <= nowDate) {
        this.setTime1.selectableRange = `${moment().format('HH:mm:ss')} - 23:59:59`
      } else {
        // 如果是以后的日期，则不需要禁用时间节点
        this.setTime1.selectableRange = '00:00:00 - 23:59:59'
      }
    }
  }
}
script>

<style lang="scss" scoped>style>