美文网首页
Vue element DateTimePicker 限制时间

Vue element DateTimePicker 限制时间

作者: 逸笛 | 来源:发表于2021-05-18 10:05 被阅读0次
图片.png
    <div class="timeSelect">
            <el-date-picker
              v-model="timeVal"
              type="daterange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
data(){
  return {
     timeVal: '',
     pickerOptions: {
      // 点击时,选择的是开始时间,也就是minDate
      onPick: ({ maxDate, minDate }) => {
         this.timeVal= minDate.getTime()
         if (maxDate) {
           // 解除限制
           this.timeVal= ''
         }
      },
      disabledDate: (time) => {
        // 是否限制的判断条件
        if (!this.isNull(this.timeVal)) {
          const val = 30 * 24 * 3600 * 1000
          const minTime = this.timeVal - val
          const maxTime = this.timeVal + val
          // 这里就是限制的关键
          return time.getTime() < minTime || time.getTime() > maxTime
        } else {
          return false
        }
      }}
  },
methods:{
  // 检查是否为空
  isNull(value) {
    if (value) {
      return false
    }
    return true
  }
}

相关文章

网友评论

      本文标题:Vue element DateTimePicker 限制时间

      本文链接:https://www.haomeiwen.com/subject/ensejltx.html