当前位置: 首页 > article >正文

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

el-date-picker

选择时间日期范围-> 昨天  近730

在这里插入图片描述

<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>


http://www.kler.cn/a/444070.html

相关文章:

  • Windows脚本清理C盘缓存
  • 《庐山派从入门到...》板载按键启动!
  • 在福昕(pdf)阅读器中导航到上次阅读页面的方法
  • 基于MATLAB的图像增强
  • flask before_request 请求拦截器返回无值则放行,有值则拦截
  • run postinstall error, please remove node_modules before retry!
  • 解决安装Weditor提示GBK编码格式问题
  • pytest入门十:配置文件
  • 网络地址转换(NAT)和端口映射
  • 算法12、基础二分查找的运用(旋转数组专题)
  • 【bWAPP】XSS跨站脚本攻击实战
  • Springboot导出Excel方法(若依实例)
  • HTML5技术深度解析与实战应用
  • 网络安全(3)_安全套接字层SSL
  • 1 数据库(中):DDL(数据库设计)、DML(增删改表中数据)、DQL(查询表中数据)单表基本语法
  • Vue前端开发-axios默认配置和响应结构
  • Python机器学习笔记(七、深度学习-神经网络)
  • Cocos Creator 试玩广告开发
  • Vue 2 中 v-html 指令的使用详解
  • 面试小札:Java后端闪电五连鞭_9
  • 告别机器人味:如何让ChatGPT写出有灵魂的内容
  • JVM 垃圾回收之垃圾回收算法
  • Android Vendor Overlay机制
  • 【机器学习】【集成学习——决策树、随机森林】从零起步:掌握决策树、随机森林与GBDT的机器学习之旅
  • Qt之样式表使用(十一)
  • STM32中ADC模数转换器