element-ui时间组选择日期件不能超过30天

27 篇文章 0 订阅

            <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
              <el-form-item label="查询日期" prop="searchTime">
                <el-date-picker v-model="filters.searchTime" type="daterange" class="widthFluid"
                                start-placeholder="开始日期"
                                range-separator="至"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd"
                                :picker-options="pickerOptions"
                                @change="dataChange" />
              </el-form-item>
            </el-col>


        pickerMinDate: '', // 获取开始选择时间
        pickerMaxDate: '', // 获取结束选择时间
        pickerOptions: { // 时间范围选择控制
          onPick: ({ maxDate, minDate }) => {
            if (minDate) {
              this.pickerMaxDate = ''
              this.pickerMinDate = minDate.getTime()
            }
            if (maxDate) {
              this.pickerMinDate = ''
              this.pickerMaxDate = maxDate.getTime()
            }
          },


 disabledDate: (time) => {
            const day30 = (30 - 1) * 24 * 3600 * 1000
            if (this.pickerMinDate !== '') {
              if (!this.pickerMaxDate) {
                let maxTime = this.pickerMinDate + day30
                let minTime = this.pickerMinDate - day30
                if (maxTime > moment()) {
                  maxTime = moment()
                }
                return time.getTime() > maxTime || time.getTime() > moment() || time.getTime() < minTime
              } else {
                let maxTime = this.pickerMinDate + day30
                if (maxTime > moment()) {
                  maxTime = moment()
                }
                return time.getTime() > maxTime || time.getTime() > moment()
              }
            }
            if (this.pickerMaxDate !== '' && !this.pickerMinDate) {
              let minTime = this.pickerMaxDate - day30
              return time.getTime() < minTime || time.getTime() > moment()
            }
            return time.getTime() > moment()
          }


      // 重置最大最小选择日期
      dataChange(val) {
        if (!val) {
          this.pickerMinDate = ''
          this.pickerMaxDate = ''
        }
      },



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值