Vue element-ui 限制时间范围选择

<el-date-picker type="datetimerange" v-model="datetime" :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期" />
data() {
  return {
    datetime: "",
    pickerOptions: {

        shortcuts: ((end) => {
          return [
            {
              text: "这周",
              onClick(picker) {
                const start = end.weekday(0).startOf("day");
                const range = [start.format(), end.format()];
                picker.$emit("pick", range);
              },
            },
            {
              text: "这个月",
              onClick(picker) {
                const start = end.startOf("M");
                const range = [start.format(), end.format()];
                picker.$emit("pick", range);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const start = end.subtract(2, "M").startOf("M");
                const range = [start.format(), end.format()];
                picker.$emit("pick", range);
              },
            },
          ];
        })(dayjs()),

        disabledDate: ((start, end) => {
          return (date) => {
            return !dayjs(date).isBetween(start, end, "day", "[]");
          };
        })(
          dayjs().subtract(1, "M").startOf("M"),
          dayjs()
        ),

      }
  }
}

posted @ 2021-09-15 14:12  Ajanuw  阅读(242)  评论(0编辑  收藏  举报