Day.js API 使用教程

在 JavaScript 开发中，时间和日期的处理是一个常见但又充满挑战的任务。Day.js 作为一款轻量级且功能强大的日期处理库，为我们提供了丰富而便捷的 API 来轻松应对各种时间日期相关的操作。接下来，让我们详细探索 Day.js 的 API 及其多样的功能。

一、引入 Day.js

在开始使用 Day.js 之前，我们需要先将其引入到项目中。有以下几种常见的引入方式：

1. 通过 <script> 标签直接引入：

<script src="dayjs.min.js"></script>

或者使用包管理工具，如 npm 或 yarn 进行安装：

npm install dayjs

yarn add dayjs

1. 使用包管理工具，如 npm 或 yarn 进行安装，然后在代码中导入：

import dayjs from 'dayjs';

二、获取当前时间

使用 dayjs() 函数可以便捷地获取当前的时间：

const now = dayjs();
console.log(now); 

三、解析日期字符串

Day.js 能够出色地解析各种格式的日期字符串。以下是一些示例：

// 标准的日期格式
const date1 = dayjs('2024-07-19');

// 自定义的日期格式
const date2 = dayjs('19 July 2024', 'D MMMM YYYY');

// 包含时间的日期字符串
const dateWithTime = dayjs('2024-07-19 15:30:00');

四、格式化日期

Day.js 提供了丰富多样的格式化选项，以满足各种不同的显示需求。

// 年-月-日
const formatted1 = dayjs().format('YYYY-MM-DD');

// 小时:分钟:秒
const formatted2 = dayjs().format('HH:mm:ss');

// 月份名称 日, 年
const formatted3 = dayjs().format('MMM D, YYYY');

// 星期几，月份名称 日，年
const formatted4 = dayjs().format('dddd, MMMM D, YYYY');

五、日期计算

1. 增加时间

使用 add() 方法可以增加指定的时间单位。

// 增加 7 天
const futureDate1 = dayjs().add(7, 'day');

// 增加 3 小时 20 分钟
const futureDate2 = dayjs().add(3, 'hour').add(20,'minute');

// 增加 1 个月
const futureDate3 = dayjs().add(1,'month');

1. 减少时间

通过 subtract() 方法来减少指定的时间单位。

// 减少 1 天
const pastDate1 = dayjs().subtract(1, 'day');

// 减少 2 小时
const pastDate2 = dayjs().subtract(2, 'hour');

// 减少 6 个月
const pastDate3 = dayjs().subtract(6,'month');

六、比较日期

Day.js 提供了方便的方法来比较两个日期的先后顺序。

const dateA = dayjs('2024-07-19');
const dateB = dayjs('2024-07-20');

if (dateA.isBefore(dateB)) {
  console.log('Date A is before Date B');
} else if (dateA.isAfter(dateB)) {
  console.log('Date A is after Date B');
} else {
  console.log('Dates are equal');
}

// 还可以直接比较
console.log(dateA < dateB); 
console.log(dateA > dateB); 
console.log(dateA === dateB); 

七、获取特定部分

能够轻松获取日期的特定部分，例如年、月、日、小时、分钟等。

const year = dayjs().year();
const month = dayjs().month();
const day = dayjs().date();
const hour = dayjs().hour();
const minute = dayjs().minute();
const second = dayjs().second();

八、设置日期

使用 set() 方法来设置日期的特定部分。

// 设置年份为 2025
const customDate1 = dayjs().set('year', 2025);

// 设置月份为 10 （注意：月份从 0 开始计数，0 表示 1 月，11 表示 12 月）
const customDate2 = dayjs().set('month', 10);

// 设置日期为 5
const customDate3 = dayjs().set('date', 5);

// 设置小时为 18
const customDate4 = dayjs().set('hour', 18);

九、本地化支持

Day.js 支持本地化设置，以便根据不同的地区显示相应的日期和时间格式。

// 设置为法语
dayjs.locale('fr');
const localizedDate1 = dayjs().format('LL');

// 设置为中文
dayjs.locale('zh-cn');
const localizedDate2 = dayjs().format('LL');

十、插件扩展

Day.js 拥有强大的插件系统，以进一步扩展其功能。

例如，安装 dayjs/plugin/relativeTime 插件来处理相对时间：

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

const pastDate = dayjs('2024-07-15');
console.log(pastDate.fromNow()); 

安装 dayjs/plugin/weekday 插件来获取星期几的相关信息：

import dayjs from 'dayjs';
import weekday from 'dayjs/plugin/weekday';

dayjs.extend(weekday);

const date = dayjs('2024-07-19');
console.log(date.weekday()); 

十一、高级用法

1. 克隆日期对象

使用 clone() 方法创建一个与原始日期对象相同但独立的副本。

const originalDate = dayjs();
const clonedDate = originalDate.clone();

1. 验证日期的有效性

通过 isValid() 方法来判断一个日期是否有效。

const invalidDate = dayjs('not a valid date');
console.log(invalidDate.isValid()); 

1. 时间区间

可以使用 startOf() 和 endOf() 方法来获取时间区间的开始和结束。

// 获取本月的开始
const startOfMonth = dayjs().startOf('month');

// 获取本周的结束
const endOfWeek = dayjs().endOf('week');

十二、总结

Day.js 凭借其丰富而强大的 API 为 JavaScript 中的时间日期处理提供了高效、简洁且灵活的解决方案。通过深入理解和运用这些 API 方法，无论是处理简单的日常日期操作，还是应对复杂的业务需求，都能够游刃有余。希望本教程能够帮助您充分发挥 Day.js 的优势，提升开发效率和代码质量。