element-ui组件使用两个日期选择器，开工时间不能大于竣工时间

原创已于 2022-04-19 14:05:33 修改 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#js #elementui

于 2022-04-15 17:26:12 首次发布

在使用Element-UI的日期选择器组件时，为确保开工时间不能超过竣工时间，可以通过设置`picker-options`属性来定义禁用日期的方法。在`pickerOptions1`中设置`disabledDate`为当选择的时间大于竣工时间时禁用，而在`pickerOptions2`中设置`disabledDate`为当选择的时间小于开工时间时禁用。务必使用箭头函数以保留正确的上下文，并注意返回值的逻辑判断，以实现日期的有效限制。

项目场景：

element-ui组件使用两个日期选择器，提出需要的功能需求
保证开工时间不能大于竣工时间
在这里插入图片描述

问题描述

在必填时间项目中，使用的是element-ui日期选择插件，绑定的数据是父组件传递的参数，需要手动配置两个时间之间的规则

	<el-row>
        <el-col :span="12">
          <el-form-item label="开工时间" prop="kgsj">
            <el-date-picker v-model="bhzsqbbjz.kgsj" type="date" placeholder="选择日期时间" :picker-options="pickerOptions1"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="竣工时间" prop="jgrq">
            <el-date-picker v-model="bhzsqbbjz.jgrq" type="date" placeholder="选择日期时间" :picker-options="pickerOptions2"> </el-date-picker>
          </el-form-item>
        </el-col>
 	</el-row>

解决方案：

在上面的元素标签中添加:picker-options属性，用来给当前时间日期选择器定义方法，方法如下面的pickerOptions1，pickerOptions2

export default {
  props: {
    bhzsqbbjz: {
      type: Object,
      default: {}
    },
  },
  data() {
    return {
      pickerOptions1: {
        disabledDate: (time) => {
          return this.bhzsqbbjz.jgrq ? time.getTime() > this.bhzsqbbjz.jgrq.getTime() : false //只能选择竣工日期之前的日期
          //返回---结束时间是否有值？   可选时间小于结束时间   ：  任意时间都可选
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          return this.bhzsqbbjz.kgsj ? time.getTime() < this.bhzsqbbjz.kgsj.getTime() : false //只能选择开工时间之后的日期
          //返回---开始时间是否有值？   可选时间大于开始时间   ：  任意时间都可选
        }
      }
    }
  },
}

注意事项：
1、disabledDate: (time)=>{}这里必须是箭头函数，否则找不到this
2、return 返回的值为false时，所有时间都可选，值为true时，所有时间都不可选
3、return time.getTime() < Date.now();
//这里的"<"表示可选时间大于当前时间，反之同理