moment获取自然时间和近期时间

系统管理员 2021-09-01 08:10 728阅读 0赞

moment：JavaScript 日期处理类库，主要用于处理日期、时间，可以进行所需要的日期格式化，也可以按所需获取相应的时间。

此次我们来简单介绍下在vue项目使用moment，以及一些常规操作。

安装依赖：

npm install moment --save

引入(可以直接main.js引入，也可以考虑新建个插件的文件夹，然后写到一个moment.js文件中)：

import Vue from 'vue';
    import moment from 'moment';
    import 'moment/locale/zh-cn'; // 获取中国标准时间，避免出现utc时间

如果全局基本格式化都是完整日期格式，可以考虑写个vue过滤器：  
根据传入的时间默认格式化参数为YYYY-MM-DD HH:mm:ss的格式，如果日期参数本身有问题，作出校验按 ’ - - ’ 处理

Vue.filter('dateFormat', function filter(dateStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
        return dateStr ? moment(dateStr).format(pattern) : '- -';
    });

常用的格式化操作可以参考官网，我就不cv官网了（手动滑稽）  
附上官网地址：[moment.js官网][moment.js]

这里说下比较有争议的点，举个例子，我们有个日期选项卡（分别是日、周、月、季、半年、年），起初做的是按近期时间计算的，如近一天、近一周，但是后期又改为自然日、自然周。  
所以如何获取自然时间和近期时间就是我们需要考虑的问题。  
格式化操作如下：

*  **自然时间（分为起始时间和结束时间构成的时间段，结束时间是当前的时间）：**
    
     *  自然日：
    
        moment().startOf('day').format('YYYY-MM-DD HH:mm:ss') // 起始时间（当前的00:00:00点）
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
     *  自然周：
    
        moment().startOf('week').format('YYYY-MM-DD HH:mm:ss') // 起始时间（当前周周一的00:00:00点）
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
     *  自然月：
    
        moment().startOf('months').format('YYYY-MM-DD HH:mm:ss') // 起始时间（当前月1号的00:00:00点）
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
     *  自然季：
    
        moment().startOf('quarters').format('YYYY-MM-DD HH:mm:ss') // 起始时间（当前季度1号的00:00:00点）
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
     *  自然半年（比较特殊，需要区分上半年或者下半年）：
    
        moment().get('month') + 1 <= 6
                        ? moment().format(`${moment().get('year')}-01-01 00:00:00`)
                        : moment().format(`${moment().get('year')}-07-01 00:00:00`)
        // 获取当前月+1然后和6进行比较区分上下半年，上半年就计算1月1号的00点，下半年就计算7月1号的00点
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
     *  自然年：
    
        moment().startOf('years').format('YYYY-MM-DD HH:mm:ss') // 起始时间（当前年1号的00:00:00点）
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
    其实可以看到，基本都是通过startOf的不同参数来获取的，唯一需要注意的可能就是半年的概念了。
 *  **近期时间（分为起始时间和结束时间构成的时间段，结束时间是当前的时间）：**
    
     *  日（近一天）：
    
        moment().day(moment().day() - 1).format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推一天的时间
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
     *  周（近一周）：
    
        moment().day(moment().day() - 6).format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推一周的时间
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
     *  月（近一个月）：
    
        moment().subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推一个月的时间
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
     *  季（近三个月）：
    
        moment().subtract(1, 'quarters').format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推三个月的时间
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
     *  半年（近六个月）：
    
        moment().subtract(6, 'months').format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推六个月的时间
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
     *  年（近一年）：
    
        moment().subtract(1, 'years').format('YYYY-MM-DD HH:mm:ss') // 当前时间往前推一年的时间
        moment().format('YYYY-MM-DD HH:mm:ss') // 结束时间（当前系统的时间）
    
    以上就是获取自然时间和近期时间的方法。  
    期待能够对你有所帮助~~~  
    如有问题，请指出，接受批评。
    
    ![在这里插入图片描述][20200819122710167.gif_pic_center]  
    个人微信公众号：  
    ![在这里插入图片描述][20200824113911375.png_pic_center]

[moment.js]: http://momentjs.cn/
[20200819122710167.gif_pic_center]: /images/20210813/c8321d7b036e4afb9903ef28b9c964f0.png
[20200824113911375.png_pic_center]: /images/20210813/9b72a95fef1045fb8ea0fe016817911f.png