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

时间:2021-09-15
本文章向大家介绍Vue element-ui 限制时间范围选择,主要包括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.date(1).startOf("M");
                const range = [start.format(), end.format()];
                picker.$emit("pick", range);
              },
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const start = end.subtract(2, "M").date(1).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").date(1).startOf("M"),
          dayjs()
        ),

      }
  }
}

原文地址:https://www.cnblogs.com/ajanuw/p/15271989.html