SoFunction
Updated on 2025-03-01

Time processing tool, detailed explanation of the usage example of dayjs

Features

Before dayjs, there was also a time processing tool, but it was relatively large, and it still had about 80kb even after compression. The former dayjs is only 2kb in size and has a consistent API, so most of them use dayjs now.

  • Small body: The core package is only 2kb in size, and internationalization requires the corresponding language package to be loaded, and the functions can be expanded through plug-ins.
  • Easy to use: consistent with the API design.
  • Immutable: All API operations will return a new Dayjs object to avoid bugs and save debugging time.
  • Internationalization: Good support for internationalization, default to the English environment.

Install and use

In modern front-end applications, install through the node package management tool, such as:

pnpm add dayjs

The basic architecture of dayjs

The dayjs package exposes a global method dayjs, which is a factory function that returns an instance of the Dayjs object, with a rough structure as follows:

function Dayjs () {
    // ...
}
function dayjs () {
    return new Dayjs()
}

So when using dayjs, every time the dayjs method is called, an instance of the Dayjs constructor is created.

Basic usage

The JavaScript native Date date object does not provide a method to process format date and time, and needs to be manually encapsulated. The date format can be processed by introducing dayjs.

There is a format method on the Dayjs prototype object that formats date and time. It supports multiple parsing methods such as timestamps, Date object instances and legitimate date strings.

import dayjs from 'dayjs'
// parse Date object instancedayjs(new Date()).format('YYYY-MM-HH') // 2022-10-24
// parse Unix timestamps (milliseconds)dayjs(1666617034000).format('YYYY/MM/DD hh:mm:ss') // 2022/10/24 21:10:34
// parse Unix timestamps (seconds)(1666617034).format('YYYY-MM-DD') // 2022-10-24
// parse date strings that conform to ISO 8601 formatdayjs('2022-10-24T20:00:00.000Z').format('YYYY-MM-HH hh:mm:ss') // 2022-10-25 04:00:00

Internationalization

The default language of dayjs is English, and there is no problem when it is only used to show time. If you want to do some other processing, such as calculating relative time, you need to manually import the Chinese language pack to convert some descriptive text into Chinese display.

When installing dayjs, the language package will be installed together, located in the dayjs/locale directory.

import dayjs from 'dayjs'
import zhCn from 'dayjs/locale/zh-cn'
(zhCn)

Using plug-ins

In some scenarios, it is necessary to display the relative time of data creation, rather than the absolute time, such as sharing in the circle of friends, posts in the forum, etc. At this time, you can import a plug-in to implement this function.

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
(relativeTime)
// The relative time from now(dayjs().toNow()) // A few seconds ago// The relative time from the current date(dayjs().to('2022-10-20')) // 5 days ago

summary

This article briefly introduces the usage of dayjs, which is mainly used to format date and time, calculate relative time, and international processing. More introductions and usages can be readOfficial Documentation。

The above is the detailed explanation of the time processing tool dayjs usage example. For more information about time processing tool dayjs, please follow my other related articles!