vue+element ui 时间选择插件的范围控制

需求1
开始时间大于等于今天，小于结束时间 默认值是今天
结束时间大于等于今天，大于开始时间
需求2
开始时间大于等于今天，并且大于指定日期，小于结束时间并且小于指定日期 默认值是今天
结束时间大于等于今天，并且大于指定日期，大于开始时间，小于指定日期

启发：https://www.cnblogs.com/steamed-twisted-roll/p/9755651.html

我的代码：

<el-form-item label="任务开始日:" prop="startTime">
              <el-date-picker
                v-model="postForm.startTime"
                :editable="false"
                type="date"
                format="yyyy-MM-dd"
                placeholder="选择日期时间"
                style="width: 200px;"
                :picker-options="pickerOptionsStart"
              />
            </el-form-item>
            <el-form-item label="任务结束日:" prop="endTime">
              <el-date-picker
                v-model="postForm.endTime"
                :editable="false"
                type="date"
                format="yyyy-MM-dd"
                placeholder="选择日期时间"
                style="width: 200px;"
                :picker-options="pickerOptionsEnd"
              />
            </el-form-item>

需求1

export default {
  name: 'CreateForm',
  data() {
    return {
    postForm: {
        startTime: new Date(), 
        endTime: '',
      },
      pickerOptionsStart: {
        disabledDate: time => {
          const endDateVal = new Date(this.postForm.endTime).getTime()
          if (endDateVal) {
            return time.getTime() > endDateVal || time.getTime() < Date.now() - 8.64e7
          }
          // 8.64e7的作用是,让今天的日期可以选择,如果不减的话,今天的日期就不可以选择,判断中写<= 也是没用的,一天的毫秒数就是8.64e7
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          const beginDateVal = new Date(this.postForm.startTime).getTime()
          if (beginDateVal) {
            return time.getTime() < beginDateVal 
          }
        }
      }
     }
    }
  }

需求2 （结合了需求1）
不知道怎么回事，这个开始时间结束时间的限制，在今天以前 今天 今天以后 竟然还要2个逻辑

export default {
  name: 'CreateForm',
  data() {
    return {
    postForm: {
        startTime: new Date(), 
        endTime: '',
      },
      parentStarTime: '', //这里就是规定的日期
      parentEndTime: '', //这里就是规定的日期
 pickerOptionsStart: {
        disabledDate: time => {
          const today = Date.now() - 8.64e7
          const startTime = new Date(this.parentStarTime).getTime()
          const endTime = new Date(this.parentEndTime).getTime()
          if (startTime < today) {
            return time.getTime() < startTime - 8.64e7 || (time.getTime() > endTime) || (time.getTime() > new Date(this.postForm.endTime))
          } else {
            return time.getTime() < startTime || (time.getTime() > endTime) || (time.getTime() > new Date(this.postForm.endTime))
          }
        }
      },
      // TODO  这个选择时间得结束范围必须在父任务范围之前
      pickerOptionsEnd: {
        disabledDate: time => {
          const today = Date.now() - 8.64e7
          const startTime = new Date(this.parentStarTime).getTime()
          const endTime = new Date(this.parentEndTime).getTime()
          if (startTime < today) {
            return (time.getTime() > endTime) || (time.getTime() < startTime - 8.64e7) || (time.getTime() < new Date(this.postForm.startTime))
          } else {
            return (time.getTime() > endTime) || (time.getTime() < startTime) || (time.getTime() < new Date(this.postForm.startTime))
          }
        }
      },

也可以像上借鉴的文章那样，单独用方法去限制

// 页面引入组件, 加上picker-options这个参数
  <el-date-picker
    v-model="exCheckDate"
    type="date"
    :picker-options="pickerOptions"
    value-format="yyyy-MM-dd"
    placeholder="Please select">
  </el-date-picker>

  // js中定义范围
  // picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期
  data () {
    return {
      pickerOptions: {
        // disabledDate是一个函数,参数是当前选中的日期值,这个函数需要返回一个Boolean值,
        disabledDate: (time) => {
          // 如果函数处理比较简单,可以直接在这里写逻辑方法
          // return time.getTime() < Date.now() - 8.64e7

          // 如果函数里处理的数据比较麻烦,也可以单独放在一个函数里,避免data数据太臃肿
          return this.dealDisabledDate(time)
        }
      }, // 日期设置对象
    }
  },

  created {
    
  },

  methods: {
    // 单独处理时间的函数
    dealDisabledDate (time) {
      // time.getTime是把选中的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒数
      // Date.now()是把今天的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒数,这样比较好比较
      // return的值,true是不可以操作选择,false可以操作选择,比如下面这个判断就只能选择今天之后的时间
      return time.getTime() < Date.now()

      // 这里减8.64e7的作用是,让今天的日期可以选择,如果不减的话,今天的日期就不可以选择,判断中写<= 也是没用的,一天的毫秒数就是8.64e7
      // return time.getTime() <= Date.now()
      // return time.getTime() < Date.now() - 8.64e7
    }
  }

复制代码

这里是编辑，编辑的时候，也是有时间范围限制的

pickerOptionsStart: {
        disabledDate: time => {
          const p = this.postForm.parentId
          if (p !== 0) {
            const startTime = new Date(this.parentStarTime).getTime()
            const endTime = new Date(this.parentEndTime).getTime()
            return time.getTime() < startTime || time.getTime() < Date.now() - 8.64e7 || (time.getTime() > endTime || time.getTime() > new Date(this.postForm.endTime))
          } else {
            const endDateVal = new Date(this.postForm.endTime).getTime()
            if (endDateVal) {
              return time.getTime() > endDateVal || time.getTime() < Date.now() - 8.64e7
            }
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          const p = this.postForm.parentId
          if (p !== 0) {
            const startTime = new Date(this.parentStarTime).getTime()
            const endTime = new Date(this.parentEndTime).getTime()
            return time.getTime() > endTime || time.getTime() < Date.now() - 8.64e7 || (time.getTime() < startTime || time.getTime() < new Date(this.postForm.startTime))
          } else {
            const beginDateVal = new Date(this.postForm.startTime).getTime()
            if (beginDateVal) {
              return time.getTime() < beginDateVal || time.getTime() < Date.now() - 8.64e7
            }
          }
        }
      },