el-date-picker 日期快捷选择自定义日期的下一小时

庭前云落

于 2024-10-17 15:13:26 发布

阅读量223

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/remsqks/article/details/143019529

<template>
  <div class="app-container">
 <el-form ref="queryForm" :inline="true" size="small">
      <el-form-item label="时间">
      <el-date-picker v-model="queryDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" size="small"
                      start-placeholder="开始日期" end-placeholder="结束日期"  style="width:340px" :picker-options="pickerOptions"></el-date-picker>
    </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="getZbIdByZbName()">查询</el-button>
      </el-form-item>
  </div>
</template>

import dayjs from "dayjs";

export default {
  data() {
    return {
    queryDate:[],
      pickerOptions: {
        shortcuts: [
          {
            text: "下一小时",
            onClick: (picker) => {
              const [startTime, endTime] = this.queryDate.map((date) =>
                dayjs(date, "YYYY-MM-DD HH:mm:ss")
              );

              // 设置下一小时的范围
              const newStartTime = endTime; // 结束时间作为新的开始时间
              const newEndTime = endTime.add(1, "hour"); // 下一小时结束时间

              picker.$emit("pick", [
                newStartTime.format("YYYY-MM-DD HH:mm:ss"),
                newEndTime.format("YYYY-MM-DD HH:mm:ss"),
              ]);
            },
          },
        ],
      },
    };
  },
  methods:{
    initQueryDate(){
      const end = new Date();
      end.setHours(this.$route.query.hour);
      end.setMinutes(0);
      end.setSeconds(0);
      const start = new Date();
      start.setHours(this.$route.query.hour-1);
      start.setMinutes(0);
      start.setSeconds(0);
      this.queryDate = [start.format("yyyy-MM-dd HH:mm:ss"),end.format("yyyy-MM-dd HH:mm:ss")]
      },
        }
};