DatePicker 日期选择器只能选择今天以前,且选择范围最大为6个月

494 阅读1分钟

主要用到  picker-options  当前时间日期选择器特有的选项参考下表

<el-date-picker
          v-model="dateValue"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="yyyy-MM" 
          format="yyyy-MM"
          popper-class="seconday-date"
          :picker-options="pickerOptions"
          @change="monthrangeChange"
  >
</el-date-picker>

话不多说,直接上代码:

data() {
    return {
      dateValue: "",
      pickerOptions: {
        //首先是选择出开始时间,根据开始时间给出可选的六个月时间范围
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            // 解除限制
            this.selectDate = "";
          }
        },
        disabledDate: (time) => {
          //time.getTime()获取的是时间戳
          //只能选择6个月的范围且不能大于当前日期
          if (this.selectDate !== "") {
            const threeMonths = 180 * 24 * 3600 * 1000; // 6个月
            const minTime = this.selectDate - threeMonths;
            const maxTime = this.selectDate + threeMonths;
            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()
            );
         }
        },
      },
    };
  },