Ant Design Vue 时间 下周 最近7天 最近30天 上周（版本3.2.18）

已于 2023-04-27 14:38:18 修改
阅读量588 收藏 1
点赞数 1
分类专栏： vben admin vue3 Ant Design Vue 文章标签： vue.js javascript 前端
于 2023-04-26 14:01:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24953751/article/details/130384611
版权
这段代码展示了如何在AntDesignVue的日期选择器组件<a-range-picker>中利用Dayjs库来设置预定义的时间范围，如今天、昨天、最近7天等。数据绑定和事件处理功能确保了用户选择时间范围后能触发相应的变更处理函数。
摘要由CSDN通过智能技术生成

Ant Design Vue 3.2版本是用Dayjs实现的，具体实现代码

 <a-range-picker
          v-model:value="dateRange"
          size="small"
          :valueFormat="dateFormat"
          @change="dataChange"
          :ranges="pickerOptions"
        />
<script lang="ts">
 import dayjs, { Dayjs } from 'dayjs';
  type RangeValue = [Dayjs, Dayjs];

  export default {
    data() {
      return {
        pickerOptions: {
          今天: [dayjs(), dayjs()] as RangeValue,
          昨天: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')] as RangeValue,
          最近7天: [dayjs().subtract(6, 'days'), dayjs()] as RangeValue,
          最近30天: [dayjs().subtract(29, 'days'), dayjs()] as RangeValue,

          本周: [
            dayjs().subtract(0, 'weeks').startOf('week'),
            dayjs().subtract(0, 'weeks').endOf('week'),
          ] as RangeValue,
          上周: [
            dayjs().subtract(1, 'weeks').startOf('week'),
            dayjs().subtract(1, 'weeks').endOf('week'),
          ] as RangeValue,
          /*  下周: [
            dayjs().subtract(-1, 'weeks').startOf('week'),
            dayjs().subtract(-1, 'weeks').endOf('week'),
          ] as RangeValue, */

          本月: [dayjs().startOf('month'), dayjs().endOf('month')] as RangeValue,

          上个月: [
            dayjs().subtract(1, 'months').startOf('month'),
            dayjs().subtract(1, 'months').endOf('month'),
          ] as RangeValue,
          /*    下个月: [
            dayjs().subtract(-1, 'month').startOf('month'),
            dayjs().subtract(-1, 'month').endOf('month'),
          ] as RangeValue, */

          第一季度: [dayjs().startOf('year'), dayjs().endOf('year').subtract(9, 'month')],
          第二季度: [
            dayjs().startOf('year').subtract(-3, 'month'),
            dayjs().endOf('year').subtract(6, 'month'),
          ],
          第三季度: [
            dayjs().startOf('year').subtract(-6, 'month'),
            dayjs().endOf('year').subtract(3, 'month'),
          ],
          第四季度: [
            dayjs().startOf('year').subtract(-9, 'month'),
            dayjs().endOf('year').subtract(0, 'month'),
          ],
          本年: [dayjs().startOf('year'), dayjs()] as RangeValue,
          去年: [
            dayjs().subtract(1, 'years').startOf('year'),
            dayjs().subtract(1, 'years').endOf('year'),
          ] as RangeValue,
        },
      };
    },
  };
</script>

以上是详细代码，下面是全部代码  是在vben admin 框架上开发的

<template>
  <Card title="系统看板" v-bind="$attrs">
    <template #extra>
      <div class="flex">
        <a-range-picker
          v-model:value="dateRange"
          size="small"
          :valueFormat="dateFormat"
          @change="dataChange"
          :ranges="pickerOptions"
        />
        <a-select
          ref="select"
          v-model:value="authorityScope"
          style="width: 90px; margin-left: 10px"
          :options="optionsPosition"
          @change="handleChange"
          size="small"
        />
      </div>

      <!-- <a-select
        ref="select"
        v-model:value="value2"
        style="width: 90px"
        :options="optionsTime"
        @change="handleChange"
        size="small"
      /> -->
    </template>

    <CardGrid v-for="item in groupItemsX" :key="item.fieldIndex" class="!md:w-1/4 !w-full">
      <div style="display: flex; justify-content: space-between; align-items: center">
        <span
          src=""
          alt=""
          :class="item.icon"
          :style="{ backgroundPosition: item.position }"
        ></span>
        <span
          class="text-lg ml-2 fontSize_12"
          style="
            width: 85%;
            height: 25px;
            display: inline-block;
            vertical-align: -4px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          "
        >
          {{ item.title }}
        </span>
      </div>

      <div class="mt-1.65 h-11.5 text-secondary leading-14" style="">{{ item.desc }}</div>
      <!-- <div class="flex justify-between text-secondary"> -->
      <!-- <span>{{ item.group }}</span> -->
      <!-- <span>{{ item.date }}</span> -->
      <!-- </div> -->
    </CardGrid>
  </Card>
</template>
<script lang="ts">
  type RangeValue = [Dayjs, Dayjs];

  export default {
    data() {
      return {
        pickerOptions: {
          今天: [dayjs(), dayjs()] as RangeValue,
          昨天: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')] as RangeValue,
          最近7天: [dayjs().subtract(6, 'days'), dayjs()] as RangeValue,
          最近30天: [dayjs().subtract(29, 'days'), dayjs()] as RangeValue,

          本周: [
            dayjs().subtract(0, 'weeks').startOf('week'),
            dayjs().subtract(0, 'weeks').endOf('week'),
          ] as RangeValue,
          上周: [
            dayjs().subtract(1, 'weeks').startOf('week'),
            dayjs().subtract(1, 'weeks').endOf('week'),
          ] as RangeValue,
          /*  下周: [
            dayjs().subtract(-1, 'weeks').startOf('week'),
            dayjs().subtract(-1, 'weeks').endOf('week'),
          ] as RangeValue, */

          本月: [dayjs().startOf('month'), dayjs().endOf('month')] as RangeValue,

          上个月: [
            dayjs().subtract(1, 'months').startOf('month'),
            dayjs().subtract(1, 'months').endOf('month'),
          ] as RangeValue,
          /*    下个月: [
            dayjs().subtract(-1, 'month').startOf('month'),
            dayjs().subtract(-1, 'month').endOf('month'),
          ] as RangeValue, */

          第一季度: [dayjs().startOf('year'), dayjs().endOf('year').subtract(9, 'month')],
          第二季度: [
            dayjs().startOf('year').subtract(-3, 'month'),
            dayjs().endOf('year').subtract(6, 'month'),
          ],
          第三季度: [
            dayjs().startOf('year').subtract(-6, 'month'),
            dayjs().endOf('year').subtract(3, 'month'),
          ],
          第四季度: [
            dayjs().startOf('year').subtract(-9, 'month'),
            dayjs().endOf('year').subtract(0, 'month'),
          ],
          本年: [dayjs().startOf('year'), dayjs()] as RangeValue,
          去年: [
            dayjs().subtract(1, 'years').startOf('year'),
            dayjs().subtract(1, 'years').endOf('year'),
          ] as RangeValue,
        },
      };
    },
  };
</script>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Card, CardGrid } from 'ant-design-vue';
  import { groupItems, optionsPosition, optionsTime, getSearchListOfSecondParamName } from './data';
  import dayjs, { Dayjs } from 'dayjs';
  import { getNewNumbers } from './api';
  import { useUserStore } from '/@/store/modules/user';
  const userStore = useUserStore();
  const groupItemsX = ref(groupItems);

  const getDayjsTime = () => dayjs(`${new Date()}`).format('YYYY-MM-DD HH:mm:ss');

  const dateFormat = 'YYYY-MM-DD';
  const startTime = ref(`${new Date().getFullYear()}-01-01`);
  const endTime = ref(getNowDate() + ' 23:59:59');
  const dateRange = ref<[Dayjs, Dayjs]>([
    dayjs(startTime.value, dateFormat),
    dayjs(endTime.value, dateFormat),
  ]);

  function getNowDate() {
    let date = new Date();
    let year = date.getFullYear();
    let month: any = date.getMonth() + 1;
    let ri: any = date.getDate();
    month = month < 10 ? '0' + month : month;
    ri = ri < 10 ? '0' + ri : ri;
    return year + '-' + month + '-' + ri;
  }
  const secondParamNameOptions = getSearchListOfSecondParamName();
  function dataChange(params) {
    startTime.value = params[0];
    endTime.value = params[1] + ' 23:59:59';
    initHomePageNumbers();
  }
  function getChildren(value) {
    // searchInfo.secondParamName = value;
  }

  const authorityScope = ref(optionsPosition[2].value);
  const value2 = ref(optionsTime[0].label);
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    initHomePageNumbers();
  };
  const initHomePageNumbers = () => {
    getNewNumbers({
      beginDate: startTime.value,
      endDate: endTime.value,
      authorityScope: authorityScope.value,
      userName: userStore.getUserInfo.realName,
    })
      .then((res) => {
        console.log(res);
        groupItemsX.value[0].title = res.data.amount1;
        groupItemsX.value[1].title = res.data.amount2;
        groupItemsX.value[2].title = res.data.amount3;
        groupItemsX.value[3].title = res.data.amount4;
        groupItemsX.value[4].title = res.data.amount5;
        groupItemsX.value[5].title = res.data.amount6;
        groupItemsX.value[6].title = res.data.amount7;
        groupItemsX.value[7].title = res.data.amount8;
        groupItemsX.value[8].title = res.data.amount9;
        groupItemsX.value[9].title = res.data.amount10;
        groupItemsX.value[10].title = res.data.amount11;
        groupItemsX.value[11].title = res.data.amount12;
        console.log(groupItemsX.value);
      })
      .catch((e) => {
        console.log(e);
      });
  };
  onMounted(() => {
    initHomePageNumbers();
  });
</script>
<style scoped lang="less">
  .ant-select {
    margin-right: 5px;
    // border-radius: 4px;

    .ant-select:not(.ant-select-customize-input) .ant-select-selector {
      border-radius: 4px !important;
    }
  }

  .iconImg {
    width: 30px;
    height: 30px;
    display: inline-block;
    background: #fff url(../image/system_sprites.png) no-repeat;
  }
  @media (min-width: 375px) and (max-width: 1024px) {
    .fontSize_12 {
      font-size: 12px;
    }
  }
</style>

效果图

 

无心1314
关注
专栏目录
用vue实现类ant Design的日历组件
ganlubaba666的博客
06-12 6992
前言 最近在对以前写的vue项目进行优化，并且进行了一些功能的完善，我写了一个周报系统，其中一个完善的功能就是，可以通过日历选择以往的周报。于是我着手ant Design的一些功能，自己实现了一个周报组件。 一些图片 未选择时 鼠标移上去 选中状态 问题 1. input聚焦问题 我的设想是这样的，日历首先是用v-if="show"，show=false设置了隐藏，我们在点击input框...
Vue3中使用Ant Design Vue图标
海阔天空
03-28 2695
Vue3中使用Ant Design Vue图标
VUE制作周排班样式
sinat_34893135的博客
04-14 4987
VUE制作周排班 样式: vue部分代码 <template> <div class="container"> <!--预约时间--> <div class="scroll-view scroll-view_H"> <div class='list' :style="{ widt...
日期选取限制日期范围antdesign vue
m0_46978096的博客
07-05 374
【代码】日期选取限制日期范围antdesign vue。
日历组件（模式分为七天模式和月模式）
yinge0508的博客
11-23 1466
先看效果： 说明：该日历分为七天模式和月份模式，顶部 tab可以切换模式，七天模式下可以点击某一天，然后自动选中后面的六天，一共选择七天；
ant-design-vue 对table的一列进行时间排序
lee_amazing的博客
12-25 1521
为了实现ant-design-vue的table列时间排序功能，我们可以在columns中添加： { title: "发布时间", dataIndex: "releaseTime", key: "releaseTime", sorter: (a, b) => { let aTimeString = a.releaseTime; let bTimeString = b.rele
vue实现周日历 日历按周切换 vue日程管理
maoge_666的博客
04-22 1357
vue实现周日历 日历按周切换 vue日程管理
ant-design-vue-3.2.18.zip
最新发布
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
Ant Design Vue 时间选择器 自定义时间
m0_58861443的博客
12-17 2642
vue Ant Design a-range-picker自定义时间 要实现的效果 ，选择时间时，需要添加 昨天，今天，上周，本月，本季度等筛选条件 步骤 自定义 rangeDate.js import moment from 'moment' const rangeDate = { data() { return { ranges: { '昨天': [moment().day(moment().day() - 1), m
基于AntDesign vue的自定义文件上传
lemon_宁萌
08-04 3116
基于AntDesign vue的自定义文件上传，可选择上传文件类型、个数限制、支持图片预览，其他文件格式下载；
【ant design vue】图片上传（二）
m0_59697051的博客
02-25 2729
续上一次的图片上传，可查看版本 效果如下： html代码： accept是限制图片上传类型，customRequest是自定义上传方式，需要判断上传的文件是否有图片，还需要把上传的图片转成formData，再使用formData.append('参数名', 参数值)按需加入需要传入的值，否则会上传失败，如图 list-type是上传列表的内建样式，file-list是绑定的图片文件数组，remove是删除图片回调，过滤出删除的图片文件，还需要把imgUrl1清空，在...
antd v4 datepicker week模式获取不到正确的周数
qq_42402933的博客
05-26 871
<DatePicker onChange={this.onChange} picker="week" /> 如图，点击选择框后，显示出来的周数全为0.
Ant Design Vue中DatePicker日期选择框默认绑定dayjs对象数据格式问题
butcher的博客
10-23 4945
我的需求是选择日期后，提交的数据可以是我期望的格式。 然而遇到的问题却是： 代码： <template> <a-date-picker v-model:value="receive" /> {{ receive }} </template> <script lang='ts'> import { defineComponent, reactive } from "vue"; import dayjs from "dayjs"; export def
「前端笔记」vue中使用 antd-vue 中将默认时间库 monent 改为 dayjs
雨y飘零久的博客
12-22 1604
Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js简单地说，只要你会Moment.js，那么你就会Day.js!但是我们知道的，Moment.js 的大小是200多k,Day.js的大小是2kB，100倍的差距，拥有同样强大的 API。 在 antd 中时间库默认使用 moment，修改方式这里使用一种实现方式。使用 antd-dayjs-webpack-pl
vue3+antd中使用Dayjs实现输出的日期格式化，和限制自定义日期选择器的可选范围
weixin_45745641的博客
10-31 4141
在vue3+antd项目中我们需要对日期数据进行格式化，通常大家会想到moment，但是在antd的v3版本中自带dayjs，强大的Day.js也拥有非常强大的日期数据格式处理的api，本文就来讲解如何在项目中进行使用
VUE实现天气预报查询
佛系女程序员！
03-15 1558
vue实现天气预报查询小demo
Antd的RangePicker设置七天前，30天前，90天前
aniudunaichiji的博客
10-18 1627
Antd的RangePicker设置七天前，30天前，90天前，并且设置默认时分秒为 00:00:00 ～ 23:59:59。记录一下在业务中，用antd的日期组件设置默认选择范围的问题。
Ant Design的日期选择器 - 设置中文 - 限制时间范围 - 回显
pig_ning的博客
03-27 548
Ant Design的日期选择器 - 设置中文 - 限制时间范围
Vue与Ant Design Vue学习心得与实战技巧
"Vue+Ant Design Vue学习经验分享1.doc" Vue.js是一个轻量级的渐进式框架，专注于视图层，易于与其他库或现有项目集成。由华人开发，对中文支持良好，学习曲线相对平缓。Vue的核心特性包括响应式的数据绑定和组件化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值