element日期选择范围限制

element 日期选择范围限制

功能需求

  • 开始时间不得在接口返回时间之前，以及不得在结束时间之后
  • 结束时间不得在当前时间之后，以及不得在开始时间之前

解决

  1. 可以通过设置 picker-options 属性来设置当前时间日期选择器特有的选项
  2. 通过设置 disabledDate 来禁用范围外的时间选项，就可以限制可选的范围了。而 disabledDate 是一个函数，返回 boolean 类型。
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
<template>
  <el-form inline :model="form">
    <el-form-item label="开始时间">
      <el-date-picker
        type="datetime"
        placeholder="选择开始时间"
        size="mini"
        v-model="form.startTime"
        default-time="00:00:00"
        :picker-options="startTimePicker"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="结束时间">
      <el-date-picker
        type="datetime"
        placeholder="选择结束时间"
        size="mini"
        v-model="form.endTime"
        default-time="00:00:00"
        :picker-options="endTimePicker"
      ></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="info" size="mini" @click="search">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      form: {
        startTime: null, //通过后端接口进行修改实现双向绑定
        endTime: moment().format("YYYY-MM-DD 00:00:00"), //当前时间
        startTimeMin: null, //后端请求返回最小开始时间
      },
    };
  },
  computed: {
    startTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.startTime
            ? time.getTime() < new Date(this.form.startTimeMin).getTime() ||
              time.getTime() > new Date(this.form.endTime).getTime()
            : false,
      };
    },
    endTimePicker() {
      return {
        disabledDate: (time) =>
          this.form.endTime
            ? time.getTime() > new Date().getTime() ||
              time.getTime() < new Date(this.form.startTime).getTime()
            : false,
      };
    },
  },
};
</script>