js时间插件Dayjs相对Momentjs的优势-插件库-万普插件库

js时间插件Day.js和Moment.js区别

昨天发了一些插件的汇总，在评论中有个网友建议把Moment.js换成Day.js，今天特意去学习了Day.js，发现比Moment.js强大很多

首先看一下Day.js的官网及对Day.js的介绍

Day.js官网： https://dayjs.gitee.io/zh-CN/

简单地说，只要你会Moment.js，那么你就会Day.js! Moment.js 的大小是200多k，Day.js的大小是2kB！大小有100倍的差距，却拥有同样强大的 API

接下来来了解一下Day.js

安装

npm install dayjs --save

使用

import dayjs from 'dayjs'
// 或者 CommonJS
// var dayjs = require('dayjs');
dayjs().format();

国际化

Day.js 支持几十个国家语言但除非手动加载，多国语言默认是不会被打包到工程里的你可以随意在各个语言之间自由切换：

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime' // 引入相对时间
import 'dayjs/locale/zh-cn' // 按需加载中文
dayjs.locale('zh-cn') // 按需加载中文
dayjs.extend(relativeTime ) // 引入相对时间
export default {
    data () {
        return {
        oldTime: '2020-12-10 12:30:00',
        newTime: null
        }
    },
    methods: {
        getTime () {
            this.newTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
        }
    },
    created () {
        this.getTime()
        console.log(dayjs().format(dayjs(this.oldTime)))
    }
}

打印结果为

10 分钟内

你也可以不用开始就加载，可以局部指定语言，比如

dayjs('2019-12-09').locale('zh-cn').format()

API

还有很多API可用：

· 当前时间

dayjs()

· 时间字符串

dayjs('2018-06-03')

· 时间戳

dayjs(1528361259484)

· Date 对象

dayjs(new Date(2018,8,18))

· 复制

dayjs().clone()

· 检测当前 Dayjs 对象是否是一个有效的时间

dayjs().isValid()

· 获取

年： dayjs().year()

月： dayjs().month()

日： dayjs().date()

星期： dayjs().day()

时： dayjs().hour()

分： dayjs().minute()

秒： dayjs().second()

毫秒： dayjs().millisecond()

· 设置

dayjs().set('year',2017)

dayjs().set('month',9)

· 增加时间并返回一个新的 Dayjs() 对象

dayjs().add(7, 'day')

dayjs().add(7, 'year')

· 减少时间并返回一个新的 Dayjs() 对象

dayjs().subtract(7, 'year')

dayjs().subtract(7, 'month')

· 返回当前时间的开头时间的 Dayjs() 对象，如月份的第一天。

dayjs().startOf('year')

dayjs().startOf('month')

· 返回当前时间的末尾时间的 Dayjs() 对象，如月份的最后一天。

dayjs().endOf('month')

dayjs().endOf('year')

· 格式化

dayjs().format()

dayjs().format('YYYY-MM-DD dddd HH:mm:ss.SSS A')

· 时间差

dayjs('2018-06-08').diff(dayjs('2017-06-01'),'years')

dayjs('2018-06-08').diff(dayjs('2017-06-01'),'day')

dayjs('2018-06-08').diff(dayjs('2017-06-01'),'hour')

· Unix 时间戳 (毫秒)

dayjs().valueOf()

· Unix 时间戳 (秒)

dayjs().unix()

· 返回月份的天数

dayjs().daysInMonth()

· 返回原生的 Date 对象

dayjs().toDate()

· 返回包含时间数值的数组

dayjs().toArray()

· 当序列化 Dayjs 对象时，会返回 ISO8601 格式的字符串

dayjs().toJSON() //2018-06-08T02:44:30.599Z

· 返回 ISO8601 格式的字符串

dayjs().toISOString() //2018-06-08T02:46:06.554Z

· 返回包含时间数值的对象

dayjs().toObject()

· 字符串

dayjs().toString()

· 检查一个 Dayjs 对象是否在另一个 Dayjs 对象时间之前

dayjs('2018-06-01').isBefore(dayjs('2018-06-02'))

· 检查一个 Dayjs 对象是否和另一个 Dayjs 对象时间相同

dayjs().isSame(dayjs())

· 检查一个 Dayjs 对象是否在另一个 Dayjs 对象时间之后

dayjs().isAfter(dayjs())

插件

这个就感觉特别好，按需使用自己需要的插件，官方提供了很多插件，这里列举几个常用的插件

· AdvancedFormat 扩展了 dayjs().format API 以支持更多模版

· RelativeTime 增加了 .from .to .fromNow .toNow 4个 API 来展示相对的时间 (e.g. 3 小时以前)

· IsLeapYear 增加了 .isLeapYear API 返回一个 boolean 来展示一个 Dayjs's 的年份是不是闰年

· WeekOfYear 增加了 .week() API 返回一个 number 来表示 Dayjs 的日期是年中第几周

· IsSameOrAfter 增加了 .isSameOrAfter() API 返回一个 boolean 来展示一个时间是否和一个时间相同或在一个时间之后

· IsSameOrBefore 增加了 .isSameOrBefore() API 返回一个 boolean 来展示一个时间是否和一个时间相同或在一个时间之前

而且还可以自己编写插件，来看官方给的介绍

最后附上gitHub地址，目前有32.7K的star

gitHub地址：https://github.com/iamkun/dayjs

最后欢迎大家来纠错、提建议，一起学习！

如果对你有帮助，可以转发/收藏，点个赞给个支持一下吧~

万普插件库

jQuery插件大全与特效教程

js时间插件Dayjs相对Momentjs的优势