限制Element ui日期选择器el-date-picker时间跨度为3个月

处理Element 日期选择器el-date-picker 限制时间跨度3个月 。

主要通过pickerOptions里的disabledDate来控制禁止选中的日期。实现思想就是,当选中第一个开始日期时,拿到该时间戳计算时间范围,然后控制接下来选中时间在3个月以内,超过范围禁用掉。

1、在template中使用el-date-picker


<el-date-picker
    v-model="value"
    type="daterange"
    :picker-options="pickerOptions"
    value-format="yyyy-MM"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @change="(value) => { dataOnChange(value) }"
> </el-date-picker>

2、在data中定义:

data() {
    return {
      value:'',//el-date-picker v-model的值
      pickDate:'',// 存放getPickDate获取的数据
      pickerOptions: {
	      onPick: this.getPickDate,
	      disabledDate: this.disabledDate
     },
   }
}

3、methods中定义处理时间范围的的方法:

  methods: {
    getPickDate(pick) {
      this.pickDate = pick;
    },
    disabledDate(date) {
      const { minDate, maxDate } = this.pickDate;
      if (minDate && !maxDate) {
        const diff = Math.abs(minDate.valueOf() - date.valueOf());
        if (diff > 1000 * 3600 * 24 * 90) {
          return true;
        }
      }
    }
  }

4、实现效果图:选择其实时间后会自动计算可选的时间范围并禁用。

在这里插入图片描述

  • 5
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端~初学者

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值