一、思路:
【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