vue2 Element 日期选择时间限制为选择日期的前后30天,开始日期可任意选择

1.限制条件用到pickerOptions

代码如下

<template>

  <div>

    <el-date-picker

      v-model="dateRange"

      type="daterange"

      range-separator="至"

      start-placeholder="开始日期"

      end-placeholder="结束日期"

      :picker-options="pickerOptions"

    />

  </div>

</template>

<script>

export default {

  data() {

    const that = this

    return {

      dateRange: [],

      curDate: '',

      pickerOptions: {

        onPick: ({ maxDate, minDate }) => {

          that.curDate = minDate.getTime()

          if (maxDate) {

            that.curDate = ''

          }

        },

        disabledDate(time) {

          if (that.curDate) {

            // 限制前后三十天

            const one = 30 * 24 * 3600 * 1000

            const minTime = that.curDate - one

            const maxTime = that.curDate + one

            return time.getTime() < minTime || time.getTime() > maxTime

          }

        }

      }

    }

  }

}

</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值