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

使用时间日期选择器实现如下功能

默认展示当天0点到当日此时此刻时间；代码实现如下

 

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

<script>
    export default {
      data () {
        return {
          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;//时间段的数组；第一项表示开始时间，第二项表示结束时间
              }
      },
    methods: {
    }
      }
</script>