element-ui使用心得之一:date-picker限制可选范围区间

8 篇文章 1 订阅
3 篇文章 0 订阅
  1. el-date-picker中的picker-options属性用来控制不可选日期区域和今天、明天等快捷选择
  2. 官方文档提供的demo中只有大于某个日期不可选
  3. 我们发现disabledDate最后return了一个返回值,我们修改这个返回值来实现大于某个日期小于某个日期都不可选,也就是设定了可选范围
    直接上代码:

HTML:

<el-date-picker
   v-model="beginTime"
  :type="dateType"
  :picker-options="pickerOptionsBegin"
  placeholder="开始日期">
</el-date-picker>
<el-date-picker
   v-model="endTime"
  :type="dateType"
  :picker-options="pickerOptionsBegin"
  placeholder="结束日期">
</el-date-picker>

JS:

data () {
	return {
		timeStamp: 2 * 24 * 60 * 60 * 1000, // 2天转为毫秒的数值,这里尽量不要直接写算好的数字,可读性不高
		beginTime: '',
		endTime: '' // 结束时间,常见需求是开始时间不大于结束时间
	}
},
computed: {
	pickerOptionsBegin: {
      disabledDate: time => { // time为形参,实参就是自动获取到的beginTime元素可以选的值
        if (time && this.endTime) {
          // 注意:这里要把time.endTime以及你要计算的时间用.getTime()转为时间戳
          // 大于结束时间不可选,小于结束时间减去两天(也就是昨天)不可选。结果是只能选昨天和今天
          return time.getTime() > new Date(endTime).getTime() || time.getTime() < new Date(endTime).getTime() - timeStamp
        }
      }
    }
}

如果有错误,请留言。有想看的内容请留言,我来写。谢谢

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值