element ui date-picker 日期范围不能超过三十天

日期组件type为daterange时,需要控制最长日期不能超过三十天。

通过使用组件"picker-options"对象,进行控制,主要用到,onPick及disabledDate.

picker-options:当前时间日期选择器特有的选项,类型object

disabledDate:设置禁用状态,参数为当前日期,要求返回Boolean,类型Function

onPicker:选中日期后会执行的回调,只有当dateRange活dateTimeRange才生效,类型Funciton({maxDate,minDate})

具体用法如下:

1)组件写法:

 <el-date-picker

            v-model="searchForm.date"

            type="daterange"

            range-separator="-"

            value-format="yyyyMMdd"

            start-placeholder="开始日期"

            end-placeholder="结束日期"

            @blur="isRestart = true"

            :picker-options="pickerOptions"

            clearable

          > </el-date-picker>

2)pickerOptions 定义:

 pickerOptions: {

        onPick: ({

          maxDate,

          minDate

        }) => {

          this.isRestart = false

          this.pickerMinDate = minDate.getTime()

          if (maxDate) {

            this.pickerMinDate = ''

          }

        },

        disabledDate: (time) => {

          if (this.curveTime && this.isRestart) {

            // 存在选中的日期且没有重新选择日期 不做禁用处理

            return

          }

          if (this.pickerMinDate !== '') {

            const one = 30 * 24 * 3600 * 1000

            const minTime = this.pickerMinDate - one

            const maxTime = this.pickerMinDate + one

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

          }

        }

      },

这样就完美解决,当鼠标点击开始日期后,结束日子就只能选中一个月以内的日期。


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容