elementui两个el-date-picker进行互相关联

本文介绍: 【代码】elementui 两个 el–date–picker进行互相关联。

两个 el–dat e–picker进行互相关联：
要求初始化的时候起始时间和结束时间都应该大于今天的时间，当选择起始时间后结束时间要大于起始时间，当选择结束时间后，起始时间要小于结束时间大于今日时间：
注意：尽量把组件自带的“此刻”通过css样式隐藏掉
在这里插入图片描述

示例是vue2中使用的：

// HTML
&lt;template&gt;
 &lt;span class="label-name"&gt;封锁起始时间：&lt;/span&gt;
<el-date-picker
  v-model="form.startTime"
  placeholder="请选择..."
  size="mini"
  type="datetime"
  value-format="yyyy-MM-dd HH:mm:ss"
  :picker-options="startTimeOptions"
  @change="changeDateTime"
/&gt;
<span class="label-name"&gt;封锁结束时间：</span>
<el-date-picker
  v-model="form.endTime"
  placeholder="请选择..."
  size="mini"
  type="datetime"
  value-format="yyyy-MM-dd HH:mm:ss"
  :picker-options="endTimeOptions"
  @change="changeDateTime"
/>
</template>

// script
<script>
data() {
  return {
    startTimeOptions: {
      disabledDate: (time) => {
        return time.getTime() < Date.now() - 86400000
      }
    },
    endTimeOptions: {
      disabledDate: (time) => {
        return time.getTime() < Date.now() - 86400000
      }
    }
  }
},
methods: {
    changeDateTime() {
      // 因为startTime和endTime格式为 年-月-日 时:分:秒， 所以这里先把startTime和endTime转换为时间戳再进行比较
      const startTime = new Date(this.form.startTime).getTime()
      const endTime = new Date(this.form.endTime).getTime()
      this.startTimeOptions = {
        disabledDate: (time) => {
          if (endTime !== 0) {
            return time.getTime() > endTime || time.getTime() < Date.now() - 86400000
          } else {
            return time.getTime() < Date.now() - 86400000
          }
        }
      }
      this.endTimeOptions = {
        disabledDate: (time) => {
          if (startTime !== 0) {
            return time.getTime() < startTime
          } else {
            return time.getTime() < Date.now() - 86400000
          }
        }
      }
    }
}
</script>