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

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

示例是vue2中使用的:

// HTML
<template>
 <span class="label-name">封锁起始时间:</span>
<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"
/>
<span class="label-name">封锁结束时间:</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>

参考链接:https://blog.youkuaiyun.com/weixin_29344615/article/details/103465089

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值