vben-admin 时间选择器设置时间快捷键

最新推荐文章于 2024-07-17 19:00:27 发布

xiaofiy

最新推荐文章于 2024-07-17 19:00:27 发布

阅读量1.7k

点赞数 1

文章标签： vben-admin 时间快捷键

本文链接：https://blog.csdn.net/xiaofiy/article/details/127300660

版权

需求一：
在时间选择弹框中增加快捷按钮，使用户选择时间更快捷
在这里插入图片描述
代码：

import moment from 'moment';
{
    field: 'time',
    label: '最近更新时间',
    colProps: { span: 16 },
    component: 'RangePicker',
    componentProps: {
      valueFormat: 'X',
      ranges: {
        '15 分钟之前': [moment().subtract(15, 'minutes'), moment()],
        '1小时前': [moment().subtract(1, 'hours'), moment()],
        '一周前': [moment().subtract(1, 'weeks'), moment()],
        '一月前': [moment().subtract(1, 'months'), moment()],
        '半年前': [moment().subtract(0.5, 'years'), moment()],
      },
      showTime: {
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
      },
    },
  },

需求二：
时间表单时间默认显示一个月区间，且从前一月的 00：00：00到当前日期的23：59：59
例如（2022-09-01 00：00：00 2022-10-0123：59：59）
在这里插入图片描述
代码

import moment from 'moment';
{
    field: 'time',
    label: '最近更新时间',
    colProps: { span: 16 },
    component: 'RangePicker',
    defaultValue: [ moment().subtract(1,'month').format('YYYY-MM-DD 00:00:00'), moment().endOf('day')],
    componentProps: {
      valueFormat: 'X',
      showTime: {
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
      },
    },
  },