element-ui 时间日期选择器限制选择七天范围内日期.


<template>

    <el-date-picker
		v-model="time"
		type="datetimerange"
		range-separator="至"
		start-placeholder="开始日期"
		end-placeholder="结束日期"
		:picker-options="pickerOptions"
	>
	</el-date-picker>

</template>

data() {
		return {
            time:'',
			choiceDate:null,
			pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
              // 把选择的第一个日期赋值给一个变量。
              this.choiceDate = minDate.getTime()
              // 如何你选择了两个日期了,就把那个变量置空
              if (maxDate) this.choiceDate = ''
            },
            disabledDate: time => {
              // 如何选择了一个日期
              if (this.choiceDate) {
			  console.log(time.getTime(),66,this.choiceDate);
                // 7天的时间戳
                const one = 6 * 24 * 3600 * 1000
                // 当前日期 - one = 7天之前
                const minTime = this.choiceDate - one
                // 当前日期 + one = 7天之后
                const maxTime = this.choiceDate + one
                return (
                  time.getTime() < minTime ||
                  time.getTime() > maxTime
                )
              }else{
			      return false
		      }
            }
          },
    }

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值