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

沉迷...

已于 2022-08-21 22:20:54 修改

阅读量1.9k

点赞数 1

分类专栏： element 文章标签： javascript 开发语言 ecmascript

于 2022-08-13 15:49:39 首次发布

本文链接：https://blog.csdn.net/weixin_42343307/article/details/126320241

版权

element 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

效果如下
在这里插入图片描述

<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>