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 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
Zz_waiting.5 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者6 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者6 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
weixin_456904276 小时前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu6 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
鱼钓猫6 小时前
H5 电子签名组件
vue.js·canvas
就是帅我不改8 小时前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端
香香甜甜的辣椒炒肉9 小时前
vue(7)-单页应用程序&路由
前端·javascript·vue.js
dreams_dream9 小时前
vue中axios与fetch比较
前端·javascript·vue.js