Weadb Notes

dayjs日期转换模块

26 天前·8 min read

Day.js 是一个轻量级的 JavaScript 时间日期处理库,它的 API 设计与 Moment.js 高度兼容,但体积只有 2KB 左右。由于其不可变性(Immutable)和链式操作的特点,在现代前端开发中被广泛使用。

以下是 Day.js 在日常开发中的常见使用方法整理:


1. 安装与基础引入

可以通过 npm 或 yarn 进行安装:

npm install dayjs --save
# 或者
yarn add dayjs

在代码中引入:

// ESM 方式
import dayjs from 'dayjs';

// CommonJS 方式
const dayjs = require('dayjs');

2. 解析与初始化(获取 Dayjs 对象)

Day.js 可以将多种格式的数据解析为 Dayjs 对象。

// 获取当前时间
const now = dayjs(); 

// 解析 ISO 8601 格式的字符串
const d1 = dayjs('2023-10-27');

// 解析时间戳(毫秒)
const d2 = dayjs(1698384000000);

// 解析时间戳(秒)需要使用 dayjs.unix()
const d3 = dayjs.unix(1698384000);

// 解析原生的 JavaScript Date 对象
const d4 = dayjs(new Date());

// 克隆一个 dayjs 对象
const d5 = dayjs(d1);

3. 格式化输出(Format)

format 是日常使用频率最高的方法,用于将 Dayjs 对象转换为指定格式的字符串。

const d = dayjs('2023-10-27 15:30:45');

d.format();                          // "2023-10-27T15:30:45+08:00" (默认 ISO 格式)
d.format('YYYY-MM-DD');              // "2023-10-27"
d.format('YYYY-MM-DD HH:mm:ss');     // "2023-10-27 15:30:45" (24小时制)
d.format('YYYY-MM-DD hh:mm:ss A');   // "2023-10-27 03:30:45 PM" (12小时制)
d.format('YYYY 年 MM 月 DD 日');       // "2023 年 10 月 27 日"

常见占位符说明:

  • YYYY: 4 位年份(如 2023)
  • MM: 2 位月份(01-12)
  • DD: 2 位日期(01-31)
  • HH: 2 位小时(00-23)
  • mm: 2 位分钟(00-59)
  • ss: 2 位秒数(00-59)

4. 日期操作(加、减、时间起点/终点)

Day.js 的所有操作都会返回一个新的 Dayjs 对象(不可变性),不会修改原始数据。

加减时间 (add / subtract)

const base = dayjs('2023-10-27');

// 增加
const nextWeek = base.add(7, 'day');       // 2023-11-03
const nextMonth = base.add(1, 'month');    // 2023-11-27

// 减少
const lastYear = base.subtract(1, 'year'); // 2022-10-27

// 链式调用
const result = base.add(1, 'month').subtract(2, 'day');

时间的开始与结束 (startOf / endOf)

用于获取某时间段的起点或终点,常用于计算某月第一天、最后一天或某天的 0 点。

const d = dayjs('2023-10-27 15:30:45');

// 获取今天的 00:00:00
d.startOf('day').format('YYYY-MM-DD HH:mm:ss');   // "2023-10-27 00:00:00"

// 获取本月的最后时刻
d.endOf('month').format('YYYY-MM-DD HH:mm:ss'); // "2023-10-31 23:59:59"

5. 日期查询与比较

用于判断两个日期之间的关系。

const dateA = dayjs('2023-10-25');
const dateB = dayjs('2023-10-27');

// 1. 是否在之前
dateA.isBefore(dateB); // true

// 2. 是否在之后
dateA.isAfter(dateB);  // false

// 3. 是否相同
dateA.isSame(dayjs('2023-10-25')); // true
// 也可以按维度比较,比如比较年份是否相同
dateA.isSame(dateB, 'year'); // true (都是 2023 年)

// 4. 计算差异 (diff)
const d1 = dayjs('2023-10-30');
const d2 = dayjs('2023-10-27');
d1.diff(d2, 'day'); // 3 (默认返回整数差值)
d1.diff(d2, 'month', true); // 返回浮点数差值

6. 国际化与本地化(i18n)

默认情况下,Day.js 使用英文配置。如果需要输出中文格式(如星期几、上午/下午),需要引入中文语言包。

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 导入中文语言包

dayjs.locale('zh-cn'); // 全局使用中文

// 此时输出星期几会变成中文
dayjs('2023-10-27').format('dddd'); // "星期五"

7. 常用插件(Plugins)的使用

为了保持体积轻量,Day.js 将很多高级功能放在了插件中,需要时单独引入。

相对时间插件 (relativeTime)

用于显示“几分钟前”、“3 天内”等相对时间。

import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

// 结合中文语言包
dayjs.locale('zh-cn');

dayjs().from(dayjs('2023-10-20')); // "7 天后" (相对于当前时间)
dayjs('2023-10-20').fromNow();     // "7 天前" (相对于当前时间)

区间判断插件 (isBetween)

判断一个日期是否在另外两个日期之间。

import isBetween from 'dayjs/plugin/isBetween';
dayjs.extend(isBetween);

// 判断 2023-10-26 是否在 25 号到 27 号之间
dayjs('2023-10-26').isBetween('2023-10-25', '2023-10-27'); // true

自定义格式解析插件 (customParseFormat)

如果你的输入日期字符串不是标准格式(如 27/10/2023),需要此插件来协助解析。

import customParseFormat from 'dayjs/plugin/customParseFormat';
dayjs.extend(customParseFormat);

// 显式指定输入格式进行解析
dayjs('27/10/2023', 'DD/MM/YYYY').format('YYYY-MM-DD'); // "2023-10-27"

总结常用速查:

  • 当前时间dayjs()
  • 转字符串dayjs().format('YYYY-MM-DD HH:mm:ss')
  • 转时间戳dayjs().valueOf() (毫秒) 或 dayjs().unix() (秒)
  • 加时间dayjs().add(1, 'day')
  • 月初dayjs().startOf('month')
  • 比大小dayjs(a).isBefore(b)