一网打尽Day.js的完全使用

990 阅读6分钟

dayjs简介

  • 体积小: 仅有2kb,下载、解析和执行更少的 JavaScript
  • 易上手: 一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样。
  • 不可变: 所有的 API 操作都将返回一个新的 Dayjs 对象,避免bug的产生,节约调试时间
  • 多平台: Day.js 可以运行在浏览器和 Node.js 中。

安装

下载

npm install dayjs

引入项目

import dayjs from 'dayjs'
dayjs() 

基本使用

解析时间

day.js解析传入的参数,并返回Day.js对象

// 不传参数直接调用 dayjs() 将返回一个包含当前日期和时间的 Day.js 对象。
dayjs() 

// 等同于如下调用方式
dayjs(new Date())

// 传入时间字符串
dayjs('2023/08/10')
dayjs('2023-08-10 08:08:08')
dayjs('2018-04-13 19:18:17.040+02:00')

// 传入毫秒时间戳(13位)
dayjs(1318781876406)

// 传入秒时间戳(10位)
dayjs.unix(1318781876)

// 传入Date对象
dayjs(new Date(2023, 8, 1))

通过.isValid()验证传入的参数是否能被解析成一个时间日期

dayjs('2022-01-33').isValid() // true
dayjs('invalud string').isValid() // false

获取

dayjs提供了一系列api来从dayjs对象中得到年月日、时分秒、周等信息。

// 获取年
dayjs().year() // 2023

// 获取月 0-11
dayjs().month() // 7

// 获取月份里的日期 1-31
dayjs().date() // 10

// 获取小时
dayjs().hour()

// 获取分钟
dayjs().minute()

// 获取秒
dayjs().second()

// 获取一周星期几 0(星期天)到6(星期六)
dayjs().day()

格式化

项目中对时间格式化是最常见的场景,dayjs返回的是dayjs对象,需要通过.format方法来指定格式化的方式。


dayjs().format() // 2023-08-11T13:48:51+08:00

dayjs().format('YYYY-MM-DD') // 2023-08-11

dayjs().format('YYYY/MM/DD') // 2023/08/11

dayjs('2019-01-25').format('DD/MM/YYYY') // '25/01/2019'


// 字符放在方括号中,即可原样返回而不被格式化替换 (例如, [MM])。
dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]') 
// 'YYYYescape 2019-01-25T00:00:00-02:00Z'

差异diff

有时候常常需要知道一个日期距离另一个日期过了多久,以及两个日期之间的差异

// 返回指定单位下两个日期时间之间的差异,默认返回毫秒数,
const date1 = dayjs('2019-01-25')
const date2 = dayjs('2018-06-05')
date1.diff(date2) // 20214000000 默认单位是毫秒
// 等同于传入第二个参数millisecond
date1.diff(date2, '等同于传入第二个参数millisecond') // 20214000000 默认单位是毫秒


// 要获取其他单位下的差异,则在第二个参数传入相应的单位
(day、month、year、week、hour、minute、second、millisecond)
date1.diff(date2, 'day')
date1.diff(date2, 'month')
date1.diff(date2, 'year')
date1.diff(date2, 'week')
date1.diff(date2, 'hour')
date1.diff(date2, 'minute')
date1.diff(date2, 'second')
date1.diff(date2, 'millisecond')

比较

判断两个日期之差

// 默认比较毫秒
dayjs().isBefore('2023-08-11')
dayjs().isAfter('2023-07-11')
dayjs().isSame('2023-07-11')

// 从天开始比较
dayjs().isBefore('2023-08-11', 'day')
dayjs().isAfter('2023-07-11', 'day')
dayjs().isSame('2023-07-11', 'day')

更改

有的时候需要增加、减少一定的时间来获取一个新的时间

  • 支持day、week、month、year、hour、minute、second等多种时间单位
// 在当前日期增加add
dayjs().add(7, 'day')
dayjs().add(7, 'month')
dayjs().add(7, 'year')
dayjs().add(7, 'hour')
dayjs().add(7, 'minute')
dayjs().add(7, 'second')

// 在当前日期减少subtract
dayjs().subtract(7, 'day')
dayjs().subtract(7, 'month')
dayjs().subtract(7, 'year')
dayjs().subtract(7, 'hour')
dayjs().subtract(7, 'minute')
dayjs().subtract(7, 'second')

高级操作

dayjs提供了一些插件来实现一些额外的查询和判断操作

获取当前日期是该年的第几天

import dayOfYear from 'dayjs/plugin/dayOfYear'
dayjs.extend(dayOfYear)

// 2023-8-10 是2023年的第 222 天
dayjs().dayOfYear() //222

获取当前日期是该年的第几周

import weekOfYear from 'dayjs/plugin/weekOfYear'
dayjs.extend(weekOfYear)

dayjs('2018-06-27').week() // 26

判断该年是否是闰年

import isLeapYear from 'dayjs/plugin/isLeapYear'
dayjs.extend(isLeapYear)
dayjs().isLeapYear()

判断一个日期是否在其他两个的日期之间

import isBetween from 'dayjs/plugin/isBetween'
dayjs.extend(isBetween)
dayjs().isBetween('2023-08-11','2023-08-12')

判断一个日期是否是今天、昨天、明天

import isToday from 'dayjs/plugin/isToday'
import isTomorrow from 'dayjs/plugin/isTomorrow'
import isYesterday from 'dayjs/plugin/isYesterday'

dayjs.extend(isToday).extend(isYesterday).extend(isTomorrow)

dayjs().isToday() // true
dayjs().add(1, 'day').isTomorrow() // true
dayjs().add(-1, 'day').isYesterday() // true

判断一个日期是否和另一个提供的日期时间相同或在其之后(之前)

import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'

dayjs.extend(isSameOrAfter).extend(isSameOrBefore)


// 比较时间
dayjs().isSameOrAfter('2023-08-11')
dayjs().isSameOrBefore('2023-08-11')

// 从月开始比较
dayjs().isSameOrAfter('2023-08-11', 'month')
dayjs().isSameOrBefore('2023-08-11', 'month')

// 从年开始比较
dayjs().isSameOrAfter('2023-08-11', 'year')
dayjs().isSameOrBefore('2023-08-11', 'year')

距今过去多久

通过relativeTime插件可以获取一个时间距今多久,或距未来某个时间多久

import relativeTime from 'dayjs/plugin/relativeTime'

// 现在到当前实例的相对时间fromNow
dayjs.extend(relativeTime)
dayjs('1999-08-01').fromNow() // 24 years ago
dayjs('1999-08-01').fromNow(true) // 24 years

dayjs('2022-08-01').fromNow() // a year ago

// 某个日期到当前时间的相对时间from
const a = dayjs('2000-01-01')
dayjs('1999-01-01').from(a) // 1 年前

// 当前实例到现在的相对时间 toNow
dayjs('1999-01-01').toNow() // 24 年后


// 某个日期到当前日期的相对时间 to
const a = dayjs('2000-01-01')
dayjs('1999-01-01').to(a) // 1 年后

自定义返回的格式

默认情况下返回的“24 years ago”并不是我们想要的返回,我们需要“24年前”或者仅仅返回24,那么就可以通过updateLocale插件来自定义输出

import updateLocale from 'dayjs/plugin/updateLocale'
dayjs.updateLocale('en', {
  relativeTime: {
    future: 'in %s',
    past: '%s 前',
    s: 'a few seconds',
    m: 'a minute',
    mm: '%d minutes',
    h: 'an hour',
    hh: '%d hours',
    d: 'a 天',
    dd: '%d 天',
    M: 'a month',
    MM: '%d months',
    y: '1 年',  // 18个月以内返回 一年前
    yy: '%d 年' // xx年前
  }
})

dayjs.extend(relativeTime)
dayjs('1999-08-01').fromNow() // 24年前

—— 公众号「风度前端」 ——

为每一个有志优秀的「前端er」引路领航,筑梦心声。

Just to be an excellent front end engineer!