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

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().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') // 结束时间(当前系统的时间)
    

    以上就是获取自然时间和近期时间的方法。
    期待能够对你有所帮助~~~
    如有问题,请指出,接受批评。

    在这里插入图片描述
    个人微信公众号:
    在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

坏丶毛病

很庆幸此文有幸对您有帮助 ~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值