dayjs 使用

一、dayjs 简介

Day.js 可以运行在浏览器和 Node.js 中。Day.js 是一个轻量级的 JavaScript 日期和时间库，用于解析、操作和格式化日期和时间。它的设计理念是简单、灵活，并且尽可能地小巧，同时提供了类似于 Moment.js 的功能。以下是关于 Day.js 的一些介绍：

特点和优势：

  1. 轻量级：Day.js 的文件大小较小，这使得它成为一个优秀的选择，特别是在需要在前端应用中处理日期和时间时，不想引入过多额外的代码。

  2. 易用性：它提供了简单且易于理解的 API，使得解析、格式化和操作日期时间变得简单。

  3. 链式操作：类似于 Moment.js，Day.js 支持链式操作，允许您在一条链上连续调用多个操作。

  4. Immutable（不可变性）：Day.js 中的日期和时间对象是不可变的，这意味着操作不会直接修改原始对象，而是返回一个新的对象。

  5. 插件系统：Day.js 具有插件系统，允许您根据需求扩展其功能，以适应特定的应用场景。

  6. 国际化支持：Day.js 支持国际化，可以处理不同语言环境下的日期和时间格式。

二、dayjs 使用

2.1 npm 使用

使用示例：

安装 Day.js 可以通过 npm 或 yarn 进行：

npm install dayjs

然后，在您的 JavaScript 代码中引入并使用它：

import dayjs from "dayjs";

2.2 浏览器使用

<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script>
  dayjs().format();
</script>

2.3 微信小程序使用

下载 dayjs.min.js 放到小程序 lib 目录下（没有新建或用其他目录）

const dayjs = require("../../libs/dayjs.min.js");

或者

const dayjs = require("dayjs");

2.4 ts 中使用

import * as dayjs from "dayjs";

三、使用示例

3.1 获取当前时间

now = dayjs();

3.2 格式化

dayjs().format();

now = dayjs();
now.format("YYYY-MM-DD HH:mm:ss");
// 2023-08-21 14:02:18

支持的格式化占位符列表：

标识 示例 描述
YY 18 年，两位数
YYYY 2018 年，四位数
M 1-12 月，从1开始
MM 01-12 月，两位数
MMM Jan-Dec 月，英文缩写
MMMM January-December 月，英文全称
D 1-31 日
DD 01-31 日，两位数
d 0-6 一周中的一天，星期天是 0
dd Su-Sa 最简写的星期几
ddd Sun-Sat 简写的星期几
dddd Sunday-Saturday 星期几，英文全称
H 0-23 小时
HH 00-23 小时，两位数
h 1-12 小时, 12 小时制
hh 01-12 小时, 12 小时制, 两位数
m 0-59 分钟
mm 00-59 分钟，两位数
s 0-59 秒
ss 00-59 秒，两位数
S 0-9 毫秒（十），一位数
SS 00-99 毫秒（百），两位数
SSS 000-999 毫秒，三位数
Z -05:00 UTC 的偏移量，±HH:mm
ZZ -0500 UTC 的偏移量，±HHmm
A AM / PM 上/下午，大写
a am / pm 上/下午，小写
Do 1st... 31st 月份的日期与序号
... ... 其他格式 ( 依赖 AdvancedFormat 插件 )

3.3 时间的加减

增加

import dayjs, { Dayjs } from "dayjs";
// 增加 7 天
dayjs().add(7, "day");

// 增加 7 周
dayjs().add(7, "week");

// 增加 7 月
dayjs().add(7, "month");

// 增加 7 小时
dayjs().add(7, "hour");

// 增加 7 季度，依赖 QuarterOfYear 插件
import quarterOfYear from "dayjs/plugin/quarterOfYear";
dayjs.extend(quarterOfYear);
dayjs().add(7, "quarter");

减少

dayjs().subtract(7, "year");

各个传入的单位对大小写不敏感，支持缩写和复数。 请注意，缩写是区分大小写的。

支持的单位列表：

单位 缩写 描述
day d 日
week w 周
month M 月份(0-11)
quarter Q 季度，依赖 QuarterOfYear 插件
year y 年
hour h 小时
minute m 分钟
second s 秒
millisecond ms 毫秒

3.4 时间的开始与结束

开始：

dayjs().startOf("year");

结束：

dayjs().endOf("month");

各个传入的单位对大小写不敏感，支持缩写和复数。

支持的单位列表：

单位 缩写 描述
date D 当天 00:00
day d 当天 00:00
month M 本月1日上午 00:00
quarter Q 本季度第一个月1日上午 00:00，依赖 QuarterOfYear 插件
year y 今年一月1日上午 00:00
week w 本周的第一天上午 00:00
isoWeek 本周的第一天上午 00:00 (根据 ISO 8601) ， ( 依赖 IsoWeek 插件 )
hour h 当前时间，0 分、0 秒、0 毫秒
minute m 当前时间，0 秒、0 毫秒
second s 当前时间，0 毫秒

3.5 时间的比较

是否之前：

// 毫秒比较
dayjs().isBefore(dayjs("2011-01-01"));

// 是否在2011-01-01 年之前
dayjs().isBefore("2011-01-01", "year");

dayjs().isBefore("2011-01-01", "day");

是否相同：

dayjs().isSame(dayjs("2011-01-01"));

// 是否与2011-01-01 年相同
dayjs().isSame("2011-01-01", "year");

dayjs().isSame("2011-01-01", "day");

是否之后：

dayjs().isAfter(dayjs("2011-01-01")); // 默认毫秒

// 是否在2011-01-01 年之后
dayjs().isAfter("2011-01-01", "year");

dayjs().isAfter("2011-01-01", "day");

是否相同或之前：

import dayjs, { Dayjs } from "dayjs";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";

dayjs.extend(isSameOrBefore);
dayjs().isSameOrBefore(dayjs("2011-01-01"));

是否相同或之后：

import dayjs, { Dayjs } from "dayjs";
import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
dayjs.extend(isSameOrAfter);

dayjs().isSameOrAfter(dayjs("2011-01-01"));

是否在时间之间：

import dayjs, { Dayjs } from "dayjs";
import isBetween from "dayjs/plugin/isBetween";
dayjs.extend(isBetween);

// 是否在2010-10-19与2010-10-25的年之间
dayjs("2010-10-20").isBetween("2010-10-19", dayjs("2010-10-25"), "year");

// 是否在2010-10-19与2010-10-25的天之间
dayjs("2010-10-20").isBetween("2010-10-19", dayjs("2010-10-25"), "day");

// 第四个参数是两个字符 '[' 表示包含, '(' 表示不包含
// '()' 不包含开始和结束的日期 (默认)
// '[]' 包含开始和结束的日期
// '[)' 包含开始日期但不包含结束日期
// 例如，当想包含开始的日期作为比较依据，你应该使用“day”作为第三个参数。
dayjs("2016-10-30").isBetween("2016-01-01", "2016-10-30", "day", "[)");

四、UTC 时间与本地时间转化

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";

dayjs.extend(utc);

export function getUtcTimeByLocalTime(localTime, format) {
  format = format || "YYYY-MM-DD HH:mm:ss";
  const utcTime = dayjs(localTime).utc().format(format);
  return utcTime;
}

export function getUtcTimeRangeByLocalTime(localTime, type, format) {
  format = format || "YYYY-MM-DD HH:mm:ss";
  const local = dayjs(localTime);
  const startTime = local.startOf(type).utc().format(format);
  const endTime = local.endOf(type).utc().format(format);
  return [startTime, endTime];
}

export function getLocalTimeByUtcTime(utcTime, format) {
  format = format || "YYYY-MM-DD HH:mm:ss";
  const localTime = dayjs.utc(utcTime).local().format(format);
  return localTime;
}

export function getLocalTimeRangeByUtcTime(utcTime, type, format) {
  format = format || "YYYY-MM-DD HH:mm:ss";
  const utc = dayjs(utcTime);
  const startTime = utc.startOf(type).format(format);
  const endTime = utc.endOf(type).format(format);
  return [getLocalTimeByUtcTime(startTime), getLocalTimeByUtcTime(endTime)];
}

UTC 示例：

const date = getUtcTimeRangeByLocalTime("2024-01", "month");
console.log("LocalTime", "2024-01", "month");
console.log("UtcTimeRange", date[0], date[1]);
console.log("-----------------------");
//LocalTime 2024-01 month
//UtcTimeRange 2023-12-31 16:00:00 2024-01-31 15:59:59

const dateDayRange = getUtcTimeRangeByLocalTime("2024-01-01", "day");
console.log("LocalTime", "2024-01-01", "day");
console.log("UtcTimeRange", dateDayRange[0], dateDayRange[1]);
console.log("-----------------------");
// LocalTime 2024-01-01 day
// UtcTimeRange 2023-12-31 16:00:00 2024-01-01 15:59:59

const localDteTime = new Date();
const utcTime = getUtcTimeByLocalTime(localDteTime);
console.log("localDteTime:", localDteTime);
console.log("utcTime:", utcTime);
console.log("-----------------------");
// localDteTime: Tue Jan 02 2024 20:47:59 GMT+0800 (中国标准时间)
// utcTime: 2024-01-02 12:47:59

const localDate = getLocalTimeByUtcTime("2024-01-01 20:00:00");
console.log("utcTime:", "2024-01-01 20:00:00");
console.log("localDate:", localDate);
console.log("-----------------------");
// utcTime: 2024-01-01 20:00:00
// localDate: 2024-01-02 04:00:00

const localDateRange = getLocalTimeRangeByUtcTime("2024-01-01", "day");
console.log("utcTime", "2024-01-01", "day");
console.log("localDateRange", localDateRange[0], localDateRange[1]);
// utcTime 2024-01-01 day
// localDateRange 2024-01-01 08:00:00 2024-01-02 07:59:59
Contributors: masecho