效果如下:

代码如下

<el-date-picker
v-model="value5"
type="datetimerange"
:picker-options="pickerOptions2"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
>
</el-date-picker>

data中:

      pickerOptions2: {
        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);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value5: "",

created中

    let newDate=new Date().valueOf();
    let strDate = new Date();
    strDate.setHours(0);
    strDate.setMinutes(0);
    strDate.setSeconds(0);
    strDate.setMilliseconds(0);
    let arr = [];
    arr.push(strDate.valueOf())
    arr.push(newDate)
    this.value5 = arr;//时间段的数组;第一项表示开始时间,第二项表示结束时间

时间限制:不能跨月,不能超过此时此刻

           if (
                new Date(arr[1]).getMonth() !=
                new Date(arr[0]).getMonth()
              ) {
                this.$alert("暂不支持跨月查询", "提示", {
                  confirmButtonText: "确定",
                  callback: action => {}
                });
                let newDate=new Date().valueOf();
                let strDate = new Date();
                strDate.setHours(0);
                strDate.setMinutes(0);
                strDate.setSeconds(0);
                strDate.setMilliseconds(0);
                let arr = [];
                arr.push(strDate.valueOf())
                arr.push(newDate)
                this.value5 = arr;//时间段的数组;第一项表示开始时间,第二项表示结束时间
                // 超过本月查不到数据
              } else if (parseInt(new Date(arr[0]).getMonth())>parseInt(new Date().getMonth())
              ||parseInt(new Date(arr[1]).getMonth())>parseInt(new Date().getMonth())
              ||parseInt(new Date(arr[0]).getFullYear())>parseInt(new Date().getFullYear())
              ||parseInt(new Date(arr[1]).getFullYear())>parseInt(new Date().getFullYear())
              ||parseInt(new Date(arr[0]).getDate())>parseInt(new Date().getDate())
              ||parseInt(new Date(arr[1]).getDate())>parseInt(new Date().getDate())
              ) {
                  this.$alert("时间错误,请重新选择", "提示", {
                    confirmButtonText: "确定",
                    callback: action => {}
                  });
                  let newDate=new Date().valueOf();
                  let strDate = new Date();
                  strDate.setHours(0);
                  strDate.setMinutes(0);
                  strDate.setSeconds(0);
                  strDate.setMilliseconds(0);
                  let arr = [];
                  arr.push(strDate.valueOf())
                  arr.push(newDate)
                  this.value5 = arr;//时间段的数组;第一项表示开始时间,第二项表示结束时间
              }

 

Logo

前往低代码交流专区

更多推荐