正常情况下我们可以通过js的构造函数new一个当前的时间戳,然后再进行时间格式处理获取当前时间,但是这样非常麻烦,一个还好 如果需要获取多个日期就非常麻烦了,这是我们可以借助一些现成的库来帮助我们达到目的如day.js

安装

以vue项目为例,更多可以参考day.js官网

npm install dayjs --save

引入

在main中引入

import dayjs from 'dayjs'
let quarterOfYear = require('dayjs/plugin/quarterOfYear')//day.js季度插件
dayjs.extend(quarterOfYear)
Vue.prototype.dayjs = dayjs//挂载到原型

使用

如果日期比较多的话建议单独封装方法,复制以下代码,传入关键词即可返回对应日期,如‘本年度’,即会返回当前年度日期

import dayjs from 'dayjs'
    let quarterOfYear = require('dayjs/plugin/quarterOfYear')//day.js季度插件
    dayjs.extend(quarterOfYear)
    export function quickTime(key){
        let start = ''
        let end = ''
        switch(key){
            case '本年度':
            start = dayjs().startOf('year').format('YYYY-MM-DD');
            end = dayjs().endOf('year').format('YYYY-MM-DD');
            break;
            case '上一年度':
            start = dayjs().add(-1, 'year').startOf('year').format('YYYY-MM-DD');
            end = dayjs().add(-1, 'year').endOf('year').format('YYYY-MM-DD');
            break;
            case '下一年度':
            start = dayjs().add(1, 'year').startOf('year').format('YYYY-MM-DD');
            end = dayjs().add(1, 'year').endOf('year').format('YYYY-MM-DD');
            break;
            case '上半年':
            start = dayjs().startOf('year').format('YYYY-MM-DD');
            end = dayjs().endOf('year').subtract(6, 'month').format('YYYY-MM-DD');
            break;
            case '下半年':
            start = dayjs().startOf('year').add(6, 'month').format('YYYY-MM-DD');
            end = dayjs().endOf('year').format('YYYY-MM-DD');
            break;
            case '本季度':
            start = dayjs().startOf('quarter').format('YYYY-MM-DD');
            end = dayjs().endOf('quarter').format('YYYY-MM-DD');
            break;
            case '上一季度':
            start = dayjs().add(-1, 'quarter').startOf('quarter').format('YYYY-MM-DD');
            end = dayjs().add(-1, 'quarter').endOf('quarter').format('YYYY-MM-DD');
            break;
            case '下一季度':
            start = dayjs().add(1, 'quarter').startOf('quarter').format('YYYY-MM-DD');
            end = dayjs().add(1, 'quarter').endOf('quarter').format('YYYY-MM-DD');
            break;
            case '本月':
            start = dayjs().startOf('month').format('YYYY-MM-DD');
            end = dayjs().endOf('month').format('YYYY-MM-DD');
            break;
            case '上月':
            start = dayjs().add(-1, 'month').startOf('month').format('YYYY-MM-DD');
            end = dayjs().add(-1, 'month').endOf('month').format('YYYY-MM-DD');
            break;
            case '下月':
            start = dayjs().add(1, 'month').startOf('month').format('YYYY-MM-DD');
            end = dayjs().add(1, 'month').endOf('month').format('YYYY-MM-DD');
            break;
            case '本周':
            start = dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD');
            end = dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD');
            break;
            case '上周':
            start = dayjs().add(-1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD');
            end = dayjs().add(-1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD');
            break;
            case '下周':
            start = dayjs().add(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD');
            end = dayjs().add(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD');
            break;
            case '今天':
            start = dayjs().format('YYYY-MM-DD');
            end = dayjs().format('YYYY-MM-DD');
            break;
            case '昨天':
            start = dayjs().add(-1, 'day').format('YYYY-MM-DD');
            end = dayjs().add(-1, 'day').format('YYYY-MM-DD');
            break;
            case '明天':
            start = dayjs().add(1, 'day').format('YYYY-MM-DD');
            end = dayjs().add(1, 'day').format('YYYY-MM-DD');
            break;
            case '过去7天':
            start = dayjs().add(-7, 'day').format('YYYY-MM-DD');
            end = dayjs().format('YYYY-MM-DD');
            break;
            case '过去30天':
            start = dayjs().add(-30, 'day').format('YYYY-MM-DD');
            end = dayjs().format('YYYY-MM-DD');
            break;
            case '未来7天':
            start = dayjs().format('YYYY-MM-DD');
            end = dayjs().add(7, 'day').format('YYYY-MM-DD');
            break;
            case '未来30天':
            start = dayjs().format('YYYY-MM-DD');
            end = dayjs().add(30, 'day').format('YYYY-MM-DD');
            break;
            default:
        }
        return [start,end];
    }

说明

挂载到原型之后直接在页面this.dayjs().format('YYYY-MM-DD')就能获取当前的日期

dayjs().format('YYYY-MM-DD HH:MM:SS')可以具体到时分秒

dayjs()后可以通过链式调用来获取更多的时间,

dayjs().add(7, 'day')是加7天,参数一如果是负数就是减去

dayjs().subtract(7, 'year')是加7年

注:如果有单独依赖的插件需要单独引入继承

如季度:

    let quarterOfYear = require('dayjs/plugin/quarterOfYear')//day.js季度插件
    dayjs.extend(quarterOfYear)

更多方法请参考官网

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐