如何给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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

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

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

时间跨度为七天的禁用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56