el-date-picker筛选时间日期选择范围

el-date-picker

javascript 复制代码
选择时间日期范围-> 昨天  近7天  30天
javascript 复制代码
<template>
  <div class="main">
    <div class="header">
      <el-form :model="form" label-width="auto">
        <el-button plain @click="setTimeToYesterday" style="margin: 0 10px; float: left">昨天</el-button>
        <el-button plain @click="setTimeToLast7Days" style="margin: 0 -10px; float: left">近7日</el-button>
        <el-button plain @click="setTimeToLast30Days" style="margin: 0 10px; float: left">30日</el-button>
        <el-date-picker
          style="width: 200px; float: left"
          v-model="form.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"/>
          </el-form>
         </div>
  </div>
</template>

<script lang='ts'>
import { ref, reactive, toRefs, onUnmounted, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router"; //引入路由
export default {
  name: "",
  setup() {
    let router = useRouter(),
    route = useRoute();
    const data: any = reactive({
      form: {
        time: ""
      },
    });
     const setTimeToYesterday=()=> {
        const end = new Date();
        const start = new Date();
        start.setDate(start.getDate() - 1);
        start.setHours(0, 0, 0, 0);
        end.setHours(23, 59, 59, 999);
        data.form.time = [start, end];
      };
      const setTimeToLast7Days=()=>  {
        const end = new Date();
        const start = new Date();
        start.setDate(start.getDate() - 7);
        start.setHours(0, 0, 0, 0);
        end.setHours(23, 59, 59, 999);
        data.form.time = [start, end];
      };
      const setTimeToLast30Days=()=> {
        const end = new Date();
        const start = new Date();
        start.setDate(start.getDate() - 30);
        start.setHours(0, 0, 0, 0);
        end.setHours(23, 59, 59, 999);
        data.form.time = [start, end];
      };
    onMounted(() => {
    });

    onUnmounted(() => {
    });

    const refData = toRefs(data);
    return {
      ...refData,
      setTimeToYesterday,
      setTimeToLast7Days,
      setTimeToLast30Days,
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label-wrap {
  margin: 0 !important;
}
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    vertical-align: middle;
    padding: 15px 0 0 0;
  }
  .section {
    flex: 5;
    padding: 0 10px;
    box-sizing: border-box;
  }
}
</style>
相关推荐
喜欢敲代码的程序员2 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
影子信息3 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月3 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu3 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20183 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿3 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘3 小时前
vue文本插值
javascript·vue.js·ecmascript
华子w9089258593 小时前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
老家的回忆5 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
hackchen6 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui