美文网首页Element-ui
el-date-picker日期选择组件,限制选择区间1年,最大

el-date-picker日期选择组件,限制选择区间1年,最大

作者: 十一点后不在线 | 来源:发表于2022-06-08 10:56 被阅读0次

// html代码
 <el-date-picker
              type="daterange"
              class="time_range"
              @change="handleDateChange"
              :picker-options="pickerOptions"
              v-model="dateRange"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              clearable
            >

// 过滤规则
 pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: time => {
          // time.getTime()获取的是时间戳
          // 只能选择365天的范围且不能大于当前日期
          const choiceDateTime = new Date(this.selectDate).getTime()
          const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 12)
          const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 12)
          const min = minTime
          const newDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
          const max = newDate < maxTime ? newDate : maxTime
          // 如果已经选中一个日期 则 返回 该日期前后12个月时间可选,后12个月最大为当前日期
          if (this.selectDate) {
            return time.getTime() < min || time.getTime() > max
          }
          // 若一个日期也没选中 则 返回 当前日期以前日期可选
          return time.getTime() > newDate

          // 以下写法虽然可以控制一个一年区间,但是当天的日期无法单独选中,弃用
          // if (this.selectDate !== '') {
          //   // console.log('123', this.selectDate)
          //   const one = 24 * 3600 * 1000 * 365
          //   const minTime = this.selectDate - one
          //   const maxTime = this.selectDate + one
          //   if (maxTime > Date.now()) {
          //     return (
          //       time.getTime() < minTime ||
          //       time.getTime() >
          //         new Date(new Date().toLocaleDateString()).getTime()
          //     )
          //   } else {
          //     return time.getTime() < minTime || time.getTime() > maxTime
          //   }
          // } else {
          //   return (
          //     time.getTime() >
          //     new Date(new Date().toLocaleDateString()).getTime()
          //   )
          // }
        }
      },

// 字段赋值
handleDateChange(checkedDate) {
      this.listQuery.beginTime = checkedDate ? checkedDate[0] : ''
      this.listQuery.endTime = checkedDate ? checkedDate[1] : ''
    },

相关文章

网友评论

    本文标题:el-date-picker日期选择组件,限制选择区间1年,最大

    本文链接:https://www.haomeiwen.com/subject/uphumrtx.html