vue+elementUI时间日期选择器实现当日0点到此时此刻

最新推荐文章于 2024-07-05 16:32:20 发布

菜鸟小佳

最新推荐文章于 2024-07-05 16:32:20 发布

阅读量4.6k

点赞数

文章标签：时间日期选择器

本文链接：https://blog.csdn.net/weixin_42429288/article/details/84771316

版权

效果如下：

代码如下

<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;//时间段的数组；第一项表示开始时间，第二项表示结束时间
              }