时间处理工具 dayjs使用示例详解

什么是dayjs

dayjs是一个轻量级的处理时间和日期的Javascript库，它和moment.js类似，并且API设计相似，但是dayjs更小、更快，支持浏览器和Node.js环境。

安装dayjs

dayjs提供两种方式使用：安装node模块和使用CDN。根据使用场景进行选择，这里我们介绍如何安装node模块

npm install dayjs --save

dayjs的基本使用

引入dayjs

在代码中使用dayjs前，需要先引入dayjs库。

import dayjs from 'dayjs'

获取当前时间

dayjs的now()方法可以获取当前时间。

const now = dayjs() // 获取当前时间
console.log(now.format()) // 打印当前时间

输出：

2021-07-30T16:54:40+08:00

格式化时间

dayjs的format()方法可以将时间格式化为不同的格式。

const date = dayjs()
console.log(date.format('YYYY/MM/DD')) // 2021/07/30

其中YYYY代表4位年份，MM代表2位月份，DD代表2位日份。

时间相差

dayjs的diff()方法可以计算两个时间之间的差值。

const start = dayjs('2021-07-01')
const end = dayjs('2021-07-31')
const diff = end.diff(start, 'day')
console.log(diff) // 30

其中'day'表示计算单位为天。可以传入的单位有：year、month、week、day、hour、minute、second和millisecond。

dayjs的实战应用

显示目录页文章发布时间相对于当前时间的发布时间

如何显示目录页文章发布时间相对于当前时间的发布时间呢？我们可以使用from()方法。

const date = dayjs('2021-07-01')
const relativeTime = date.from(dayjs())
console.log(relativeTime) // 1 month ago

其中from()方法会计算传入的时间和当前时间的差值，然后显示出相对时间。

计算两个时间的差距

看一个稍微复杂的例子：使用dayjs计算指定时间和当前时间之间的差距，并在页面上显示出两天之后的时间。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>dayjs使用示例</title>
</head>
<body>
  <div id="time"></div>
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1.10.4"></script>
  <script>
    const targetDate = dayjs('2021-08-01')
    const now = dayjs()
    const diff = targetDate.diff(now, 'day')
    const future = now.add(diff, 'day')
    document.querySelector('#time').innerText = future.format('YYYY/MM/DD')
  </script>
</body>
</html>

运行以上代码，页面上会显示出2021/08/03，即两天之后的时间。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：时间处理工具 dayjs使用示例详解 - Python技术站