element ui有没有季度选择以及季度区间选择组件?

element ui有没有季度选择以及季度区间选择组件?

阅读 1.9k
1 个回答

这个你完全可以自己设置的,你可以载入moment.js 库,这样时间设置很方便。

 <el-date-picker
        v-model="data.filter.DtBegin"
        type="date"
        v-if="!appStore.getShow"
        @change="setDateLeft"
        value-format="YYYY-MM-DD"
        placeholder="查询开始时间"
        size="large"
        :shortcuts="baseUtils.dataSet()"
      />

其中 :shortcuts="baseUtils.dataSet()是我导入的import * as baseUtils from '@/utils/base'代码为:

export const dataSet=()=>{
  return [
    {
      text: '今天',
      value: () => {
        const  start = moment().subtract(0,'days');
        const  end =start
        return [start, end]
      },
    },
    {
      text: '昨天',
      value: () => {
        const  start = moment().subtract(1,'days');
        const  end =start
        return [start, end]
      },
    },
    {
      text: '明天',
      value: () => {
        const  start = moment().add(1,'days');
        const  end =start
        return [start, end]
      },
    },
    {
      text: '本周',
      value: () => {
        const   start = moment().week(moment().week()).startOf('week').format('YYYY-MM-DD');
        const  end = moment().week(moment().week()).endOf('week').format('YYYY-MM-DD');
        return [start, end]
      },
    },
    {
      text: '上周',
      value: () => {
        const weekOfday = parseInt(moment().format('d'))
        const start =  moment().subtract(weekOfday + 6, 'days').format('YYYY-MM-DD')
        const end = moment().subtract(weekOfday +0, 'days').format('YYYY-MM-DD')
        return [start, end]
      },
    },
    {
      text: '本月',
      value: () => {
        const start = moment().startOf('month').format('YYYY-MM-DD');
        const end = moment().endOf('month').format('YYYY-MM-DD');
        return [start, end]
      },
    },
    {
      text: '上月',
      value: () => {
        const start =  moment().subtract(1,'month').startOf('month').format('YYYY-MM-DD')
        const end = moment().subtract(1,'month').endOf('month').format('YYYY-MM-DD')
        return [start, end]
      },
    },
    {
      text: '本年',
      value: () => {
        const start = moment().startOf('year').format('YYYY-MM-DD');
        const end = moment().endOf('year').format('YYYY-MM-DD');
        return [start, end]
      },
    },

    {
      text: '近七天',
      value: () => {
        const start = moment().subtract(7, 'days').format('YYYY-MM-DD');
        const end =new Date()
        return [start, end]
      },
    },
    {
      text: '近一月',
      value: () => {
        const start = moment().subtract(1, 'months').format('YYYY-MM-DD');
        const end =new Date()
        return [start, end]
      },
    },
    {
      text: '近一年',
      value: () => {
        const start = moment().subtract(1, 'years').format('YYYY-MM-DD');
        const end =new Date()
        return [start, end]
      },
    },
      /*{
        text: '今起一周',
        value: () => {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 7)
          return [start, end]
        },
      },
      {
        text: '今起一月',
        value: () => {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 30)
          return [start, end]
        },
      },
      {
        text: '今起三月',
        value: () => {
          const end = new Date()
          const start = new Date()
          end.setTime(start.getTime() + 3600 * 1000 * 24 * 90)
          return [start, end]
        },
      },*/
    ]

}

想要什么时间都可以自己设置。
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题