[elementUI] el-date-picker只允许选择三个月内的日期(非当前上下三个月)

elementUI 2Vue2

  <el-date-picker
            v-model="timeRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            style="width: 250px;"
            :picker-options="pickerOptions"
          >
</el-date-picker>
import dayjs from "dayjs";
...
data() {
  let _startDate = null;
  return {
     timeRange:[],
      pickerOptions: {
        onPick({ minDate }) {
          _startDate = minDate;  // 捕获首次选择的日期
        },
        disabledDate: (time) => {
          if (!_startDate) {  return false; }  //未选择起始时间,不做限制

          // 获取当前日期
          let now = dayjs(_startDate);
          const threeMonthsAgo = now.add(-3, "month"),
                threeMonthsAgo2 = now.add(3, "month");
          // 禁用三个月前后的日期
          return ( time.getTime() < threeMonthsAgo.toDate().getTime()
            || time.getTime() > threeMonthsAgo2.toDate().getTime() );
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              // const end = new Date();
              // const start = new Date();
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              let now = dayjs();
              let start = now.add(-1, "month");
              let end = now;
              picker.$emit("pick", [start.toDate(), end.toDate()]);
            },
          },
          {
            text: "本月",
            onClick(picker) {
              let now = dayjs();
              let start = dayjs(now.format("YYYY-MM") + "-01");
              picker.$emit("pick", [start.toDate(), now.toDate()]);
            },
          },
        ],
      },
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容