vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > el-date-picker选择范围

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

作者:小阳生煎

这篇文章主要介绍了el-date-picker筛选时间日期选择范围,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧

el-date-picker

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

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

到此这篇关于el-date-picker筛选时间日期选择范围的文章就介绍到这了,更多相关el-date-picker日期选择范围内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文