美文网首页
饿了吗中DatePicker日期选择器限制30天选择区间且不大于

饿了吗中DatePicker日期选择器限制30天选择区间且不大于

作者: 十一点后不在线 | 来源:发表于2021-04-01 10:27 被阅读0次

在标签el-date-picker上添加:picker-options="pickerOptions"

过滤方法:

// 限制日期区间
      selectDate: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime()
          if (maxDate) {
            this.selectDate = ''
          }
        },
        disabledDate: time => {
          //time.getTime()获取的是时间戳
          // 当前时间往前30天可选
          // return (
          // time.getTime() > Date.now() ||
          // time.getTime() < Date.now() - 30 * 24 * 60 * 60 * 1000
          // )
          // 只能选择30天的范围且不能大于当前日期
          if (this.selectDate !== '') {
            const one = 29 * 24 * 3600 * 1000
            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()
            )
          }
        }
      },

相关文章

网友评论

      本文标题:饿了吗中DatePicker日期选择器限制30天选择区间且不大于

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