el-date-picker限制日期选择范围

el-date-picker限制日期选择范围

---

el-date-picker 限制日期选择范围。

• 组件 🪶

  <el-date-picker
       v-model="dateRange"
       type="daterange"
       value-format="yyyy-MM-dd"
       placeholder="请选择日期"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
       // 通过这里限制时间选择范围，必须写在 data() 数据中的返回值
       :picker-options="setDateRange"
  ></el-date-picker>
  

• 逻辑 🪶

  data() {
      return {
          dateRange:[],
          // 设置可选择的时间段，*** 必须在 data 返回数据 ***
          setDateRange: {
              disabledDate: time => {
                  // 只能选择当前 1 年内的时间
                  const year = 365 * 24 * 3600 * 1000;
                  // 只能选择当前 1 月的时间
                  const month = 30 * 24 * 3600 * 1000;
                  // 只能选择当前 1 周的时间
                  const week = 7 * 24 * 3600 * 1000;
                  // 返回小于当前日期并近【1年】【1月】【1周】内的日期
                  // 注意：这是从当前日期开始往前算，如果当前日期可选的话，不要写【-8.64e7】
                  return time.getTime() > Date.now() || time.getTime() < (Date.now() - 8.64e7) - year;
                  // 禁用今天之前的日期【当前天可选】
                  return time.getTime() < Date.now() - 8.64e7;
                   // 禁用今天之前的日期【当前天不可选】
                  return time.getTime() < Date.now();
                  // 禁用今天之后的日期【当前天不可选】
                  return time.getTime() > Date.now() - 8.64e7;
                  // 禁用今天之后的日期【当前天可选】
                  return time.getTime() > Date.now();
              }
          },
      }
  }