时间处理工具day.js与moment.js的使用:

Sun Peng

已于 2022-12-05 11:19:57 修改

阅读量4.5k

点赞数 3

分类专栏：软件与插件文章标签： javascript 前端 vue.js

于 2022-08-30 14:37:47 首次发布

本文链接：https://blog.csdn.net/weixin_53791978/article/details/126603686

版权

软件与插件专栏收录该内容

36 篇文章 1 订阅

订阅专栏

一、思路：

【1】day.js
【2】moment.js

【3】Day.js 是代替修改本地Date.prototype，Day.js对Date对象进行了封装，只需要调用Dayjs()即可。

【4】相对moment.js而已，day.js的体积更小，只有2KB左右；moment.min.js 有16.7KB。

这是前端日期处理工具,CSDN有许多使用moment等处理日期，但由于不知道这两个插件，所以一直不知道怎么回事

二、day.js

1、安装day.js插件

npm install dayjs --save

2、法一：直接挂载到全局main.js

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
Vue.prototype.$dayjs = dayjs;

import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);

//全局过滤器（不需要可去除）
Vue.filter('relativeTime', value => {
    return dayjs().to(dayjs(value))
})

3、法二:配置js文件=>再挂载到全局main.js使用：

src=>utils文件夹=>dayjs.js

/* 
    dayjs日期处理工具
*/
import Vue from 'vue'
import dayjs from "dayjs";


// dayjs默认语言是英文,配置为中文
import 'dayjs/locale/zh-cn' //加载中文语言包
dayjs.locale('zh-cn')//全局使用

// dayjs获取当前时间
dayjs().format('YYYY-MM-DD HH:mm:ss')


// 配置相对时间插件
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)


/* 
    全局模板过滤器
    参数1：过滤器名称
    参数2：过滤器函数
    使用方式：{{表达式||过滤器名称}}
*/
Vue.filter('relativeTime', value => {
    return dayjs().to(dayjs(value))
})

在这里插入图片描述

4、案例效果：

在这里插入图片描述

三、moment.js

1.安装依赖

npm install moment --save

2.main.js配置

// 导入moment.js
import moment from 'moment' 
// 定位中国使用中文
moment.locale('zh-cn')
// 添加到全局配置属性
Vue.prototype.$moment = moment

3.vue使用：

案例1：

在这里插入图片描述

let currentTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss') //2022-11-03 16:07:15

案例2：

//main.js 里面=>定义一个全局过滤器实现日期格式化

Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
  // 使用momentjs这个日期格式化类库实现日期的格式化功能
  return moment(input).format(fmtstring);
});

<p class="subtitle">
	<span>发表时间：{{ createTime | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>   
</p>

//根据选中的时间获取本周的第一天及最后一天
this.getWeekStart = this.$moment(this.formData.startTime).startOf("week").format('YYYY-MM-DD HH:mm:ss')
this.getWeekEnd = this.$moment(this.formData.startTime).endOf("week").format('YYYY-MM-DD HH:mm:ss')

//根据选中的时间获取本月的第一天及最后一天（this.formData.startTime改成new date()就是今天）
this.getMonthStart = this.$moment(this.formData.startTime).startOf("month").format("YYYY-MM-DD HH:mm:ss")
this.getMonthEnd = this.$moment(this.formData.startTime).endOf("month").format("YYYY-MM-DD HH:mm:ss")

获取前一天的日期
this.$moment().subtract(1, 'day').format('YYYY-MM-DD')

this.gpsTimeStart=this.$moment(this.queryParam.startTime).subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
this.gpsTimeEnd=this.$moment(this.queryParam.endTime).subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss'),

获取前一个月的日期
this.$moment().subtract(1, 'month').format('YYYY-MM-DD')
获取前一年的日期
this.$moment().subtract(1, 'year').format('YYYY-MM-DD')

四、常见用法：

1. 初始化日期 / 时间

dayjs().format('YYYY-MM-DD');		    // 初始化日期
dayjs().format('YYYY-MM-DD HH:mm:ss');  // 初始化日期时间

2. 格式化日期 / 时间

dayjs(value).format('YYYY-MM-DD');			// 初始化日期
dayjs(value).format('YYYY-MM-DD HH:mm:ss'); // 初始化日期时间

3. 加 / 减

dayjs().add / dayjs().subtract 代表在当前时间上去加减；
dayjs(value).add / dayjs(value).subtract 代表在指定时间（value）上去加减；

dayjs().add(7, 'day').format('YYYY-MM-DD');   // 2022-04-27 今天（2022-04-20）加上7天
dayjs().add(1, 'month').format('YYYY-MM-DD');   // 2022-05-20 今天（2022-04-20）加上一月

dayjs().subtract(2, 'year').format('YYYY-MM-DD');   // 2020-05-20 今天（2022-04-20）减去2年
dayjs().subtract(2, 'hour').format('YYYY-MM-DD HH:mm:ss');   
// 2022-04-20 14:03:39 今天现在（2022-04-20 16:03:39）减去2小时

4、获取某年某月的第一天或最后一天

【1】获取某年某月的第一天：

dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss')   // 2022-01-01 00:00:00  => 第一天格式化出来的时分秒都是0
dayjs().startOf('month').format('YYYY-MM-DD')   // 2022-04-01

【2】获取某年某月的最后一天：

dayjs().endOf('year').format('YYYY-MM-DD HH:mm:ss')   // 2022-12-31 23:59:59  => 最后时间 格式化出来的时分秒是23:59:59
dayjs().endOf('month').format('YYYY-MM-DD')   // 2022-04-30

5. 获取星期几

dayjs().day() : 返回0(星期日)到6(星期六)的数字

设置时也只能接受 0-6 的数字：
dayjs().day(6).format('YYYY-MM-DD')：获取最近周六的日期 => 2022-04-23
dayjs().day(0).format('YYYY-MM-DD')：获取最近周日的日期 => 2022-04-17

moment().week();       // 16  今年第16周
moment().day();        // 2   星期2
moment().weeksInYear();// 52  今年周数

6. 获取毫秒数

dayjs('2019-01-25').valueOf() 或 dayjs().valueOf()

7. 获取时间差（默认输出的差值单位是毫秒）

dayjs('2019-01-25').diff('2018-06-05', 'month');         // 7
dayjs('2019-01-25').diff(dayjs('2018-06-05'), 'month');  // 7

8. 获取时、分、秒

当前时间：2022-04-20 16:55:55 ；
以下大部分方法都会往前溢出；如毫秒超过999，将持续到秒；秒超过59，将持续到分，这边情况在设置时特别突出！

console.log('-----获取年', dayjs().year());    // ==>> 2022
console.log('-----获取月', dayjs().month());   // 0到11的数字 ==>> 3
console.log('-----获取星期', dayjs().day());   // 0(星期日)到6(星期六)的数字 ==>> 3
console.log('-----获取天', dayjs().date());    // 1到31的数字 ==>> 20
console.log('-----获取小时', dayjs().hour());  // 0到23的数字 ==>> 16
console.log('-----获取分钟', dayjs().minute());// 0到59的数字 ==>> 55
console.log('-----获取秒', dayjs().second());  // 0到59的数字 ==>> 55
console.log('-----获取毫秒', dayjs().millisecond());  // 0到999的数字 ==>> 333

9. 判断一个日期是否在另外一个日期之后 isAfter

// day.js 为 2022-04-20
console.log('isAfter', dayjs().isAfter(dayjs('2011-01-01'))) 			 	// true
console.log('isAfter', dayjs('2022-04-20').isAfter(dayjs('2022-04-21')))	// false
console.log('isAfter', dayjs('2022-04-20').isAfter(dayjs('2022-04-20')))	// 相同也为false

10. 判断一个日期是否在另外一个日期之前 isBefore

// day.js 为 2022-04-20
console.log('isBefore', dayjs().isBefore(dayjs('2011-01-01')))             // false
console.log('isBefore', dayjs('2022-04-20').isBefore(dayjs('2022-04-21'))) // true
console.log('isBefore', dayjs('2022-04-20').isBefore(dayjs('2022-04-20'))) // 日期相同时也为false

11. 判断两个日期是否相同 isSame

// day.js 为 2022-04-20
console.log('isSame', dayjs().isSame(dayjs('2011-01-01')))  			// false
console.log('isSame', dayjs('2022-04-20').isSame(dayjs('2022-04-21')))	// false
console.log('isSame', dayjs('2022-04-20').isSame(dayjs('2022-04-20')))	// true

13. 判断一个日期是否在两个日期之间 isBetween

注意:
此功能依赖IsBetween插件
此处也将演示如何使用 Day.js 的插件

import dayjs from 'dayjs'	// 引入dayjs
import isBetween from 'dayjs/plugin/isBetween'	// 引入相关插件

created() {
 	dayjs.extend(isBetween); // 挂载插件
	// 使用插件
	console.log('isBetween', dayjs('2010-10-20').isBetween('2010-10-19', dayjs('2010-10-25')) )
}

moment('2022-04-20').isBefore('2022-04-21');                  //true
moment('2022-04-20').isSame('2022-04-20');                    //true
moment('2022-04-20').isAfter('2022-04-20');                   //false
moment('2022-04-20').isBetween('2022-04-19', '2022-04-21');   //true
 
moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', null, '()'); //false
moment('2016-10-30').isBetween('2016-10-30', '2016-12-30', null, '[)'); //true
moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', null, '()'); //false
moment('2016-10-30').isBetween('2016-01-01', '2016-10-30', null, '(]'); //true
moment('2016-10-30').isBetween('2016-10-30', '2016-10-30', null, '[]'); //true