element-ui 日期选择器,自定义禁用条件,先定义一个大时间范围,选的时候,再定义小范围

130 阅读1分钟

element-ui 日期选择器,自定义禁用条件,先定义一个大时间范围,选的时候,再定义小范围 比如,限制当前时间 过去的一年内可选,如果选了一个时间后,只能选前后30天,且不能超过过去的一年内

<el-form-item label="统计日期" prop="time">
    <el-date-picker
      v-model="formParams.time"
      class="c-date-picker"
      type="daterange"
      unlink-panels
      value-format="yyyy-MM-dd"
      :picker-options="pickerOptions"
    >
    </el-date-picker>
</el-form-item>

data() {
    pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 如果选择了开始日期,则动态计算最大可选日期
          if (minDate && !maxDate) {
            this.pickerOptions.disabledDate = (date) => {
                 // 一月以后的时间
                const oneMonthLater = new Date(minDate);
                oneMonthLater.setDate(oneMonthLater.getDate() + 30); // 365天内

                // 一月以前的时间
                const oneMonthAgo = new Date(minDate);
                oneMonthAgo.setDate(oneMonthAgo.getDate() - 30); // 365天内

                // 小于当前时间 在一年前时间前
                const oneYearAgo = new Date();
                oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
                if (date > new Date() || oneYearAgo > date) {
                    return true;
                }

                return (
                    date < oneMonthAgo ||
                    date > oneMonthLater
                );
            };
          } else {
              // 还原时间限制
            this.pickerOptions.disabledDate = this.pickerOptions.disabledDateCopy;
          }
        },
        disabledDate(time) {
            const now = new Date();
            // now.setFullYear(now.getFullYear() + 1);
            const oneYearAgo = new Date();
            oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
            return (
                time > now ||
                time < oneYearAgo
            );
        },
        disabledDefaultDate(time) {
            const now = new Date();
            const oneYearAgo = new Date();
            oneYearAgo.setFullYear(oneYearAgo.getFullYear() - 1);
            return (
                time > now ||
                time < oneYearAgo
            );
        }
      },

效果如图

image.png

image.png