el-date-picker如何选择规定范围内的时间(十天以内的时间)

Favour722023-11-03 6:03

这个需求是可以选择之后来计算,选择当前日期之后自动计算当前日期前后的十天以内的日期

如下图就是19号前面十天的日期以及后面十天的日期(包含当天)

需要用到elementUI

el-date-picker是Element UI库中的一个组件，用于日期选择

html 复制代码

       <el-date-picker v-model="time" style="width:350px" class="custom-select" size="mini" :type="dateType"
                size="small" start-placeholder="开始日期" end-placeholder="结束日期" :value-format="dateFormat"
                :picker-options="pickerOptions" @change="timeChane2" format="yyyy-MM-dd" range-separator="至"
                value-format="yyyy-MM-dd" clearable></el-date-picker>

以下是需要的变量

javascript 复制代码

data:{
       time: [],
        dateType: 'daterange',
        dateFormat: 'yyyy-MM-dd HH:mm:ss',
        choiceDate: null,

        //重点

        pickerOptions: {
          onPick: ({ maxDate, minDate }) => {
            this.choiceDate = minDate.getTime()
            if (maxDate) this.choiceDate = ''
          },
          disabledDate: time => {
            // 如何选择了一个日期
            if (this.choiceDate) {
              // 10天的时间戳
              const one = 9 * 24 * 3600 * 1000
              // 当前日期 - one = 10天之前
              const minTime = this.choiceDate - one
              // 当前日期 + one = 10天之后
              const maxTime = this.choiceDate + one
              return (
                time.getTime() < minTime ||
                time.getTime() > maxTime ||
                // 限制不能选择今天及以后
                time.getTime() > Date.now()
              )
            } else {
              // 如果没有选择日期，就要限制不能选择今天及以后
              return time.getTime() > Date.now()
            }
          }
        },

}

v-model="time"表示双向绑定一个数组time，用来保存日期选择器选择的时间。

dateType="daterange"表示日期选择器的类型为日期范围选择，即可以选择起始日期和结束日期。dateFormat="yyyy-MM-dd HH:mm:ss"表示日期的格式为年-月-日时:分:秒。

pickerOptions是一个自定义选项对象，其中onPick函数会在用户选择日期范围时被调用，这个函数会把最小日期minDate保存在choiceDate中，同时如果有最大日期maxDate，就会清空choiceDate。

disabledDate是一个禁用日期的函数，可以根据返回值来禁用某些日期。其中，如果choiceDate存在，则限制可以选择的日期为当前选择日期的前后10天以内，并且不能选择今天及以后的日期。如果choiceDate不存在，则只能禁用今天及以后的日期。