• 推荐几款好用的js日期控件
  • 发布于 2个月前
  • 598 热度
    0 评论
  • CEBBCt
  • 4 粉丝 44 篇博客
  •   
在 JavaScript 中进行日期/时间操作是一个很麻烦的事,JS的生态中有很多实用的日期操作库,今天就来分享几个实用的日期库。喜欢的感觉收藏起来吧!

Moment.js
Moment.js 是一个轻量级 JavaScript 日期库,用于解析、验证、操作和格式化日期,是一个很受欢迎的日期操作库。不过,Moment.js 是一个遗留项目,现在处于维护模式。维护者认为,无法重构 Moment.js 来满足现代 JavaScript 开发的需求,例如不变性和 tree shaking。Lighthouse(Chrome 的内置审核工具)警告不要使用 Moment,因为它的大小较大 (329 kb)。

安装Moment.js
可以通过以下任一方式来安装该库:
npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
导入Moment.js
在 JavaScript 文件中,导入Moment.js库:
const moment = require('moment');
创建日期对象
可以传递一个日期字符串或日期对象给moment()函数,然后返回一个Moment对象:
const date = moment('2023-07-07');
格式化日期显示
Moment.js 提供了丰富的日期格式化选项。可以使用format()方法将日期格式化为所需的字符串格式:
const formattedDate = date.format('YYYY-MM-DD');
console.log(formattedDate); // 输出:2023-07-07
日期运算
Moment.js提供了许多方便的方法来进行日期和时间的运算。下面是一些示例:
// 堆代码 duidaima.com
// 添加一天
const tomorrow = date.add(1, 'day');
console.log(tomorrow.format('YYYY-MM-DD')); // 输出:2023-07-08

// 减去一个月
const lastMonth = date.subtract(1, 'month');
console.log(lastMonth.format('YYYY-MM-DD')); // 输出:2023-06-07

// 比较日期
const otherDate = moment('2023-07-10');
console.log(date.isBefore(otherDate)); // 输出:true
console.log(date.isAfter(otherDate)); // 输出:false
Moment.js还提供了许多其他常用的功能,如获取当前日期、解析日期字符串、计算日期之间的差异等。

Date-fns
Date-fns 是一个现代、轻量级的JavaScript日期处理库,用于在浏览器和Node.js环境中处理日期和时间。它的设计目标是提供一组简单、纯函数式的API来执行各种日期操作,而不依赖于全局对象。

以下是Date-fns 的特点:
轻量级:Date-fns非常小巧,只包含所需的功能,可以减少项目的文件大小。
纯函数:Date-fns的函数都是纯函数,即相同的输入总是产生相同的输出,不存在副作用。这使得代码更可预测、易测试和可维护。
易于使用:Date-fns的API设计简单易懂,与现代JavaScript的语法和惯用法保持一致。它提供了大量的日期处理功能,如格式化、解析、比较、计算等。
兼容性:Date-fns支持所有现代的浏览器和Node.js版本。
安装Date-fns
可以使用npm或yarn等包管理工具来安装Date-fns。在项目目录下运行以下命令安装Date-fns:
npm install date-fns
导入Date-fns
在JavaScript文件中导入所需的Date-fns函数:
import { format, parseISO, differenceInDays } from 'date-fns';
使用Date-fns函数
使用导入的函数来执行各种日期操作。以下是一些示例:
const date = new Date();

// 格式化日期
const formattedDate = format(date, 'yyyy-MM-dd');
console.log(formattedDate); // 输出:2023-07-07

// 解析日期字符串
const parsedDate = parseISO('2023-07-07');
console.log(parsedDate); // 输出:Tue Jul 04 2023 00:00:00 GMT+0530 (India Standard Time)

// 计算日期之间的差异
const startDate = new Date(2023, 6, 1);
const endDate = new Date(2023, 6, 10);
const diff = differenceInDays(endDate, startDate);
console.log(diff); // 输出:9
在上述示例中,使用了format()函数将日期格式化为指定的字符串格式,使用了parseISO()函数解析日期字符串为日期对象,以及使用了differenceInDays()函数计算两个日期之间的天数差异。

Day.js
Day.js 是一个轻量级的JavaScript日期处理库,用于解析、操作和格式化日期对象。它的设计目标是提供一个简单、灵活的API,使得处理日期和时间变得更加方便。

以下是 Day.js 的特点:
轻量级:Day.js非常小巧,压缩后仅有2 KB左右的大小,可以减少项目的文件大小。
易用性:Day.js的API设计简洁明了,与现代JavaScript的语法和惯用法保持一致。你可以轻松地对日期进行解析、格式化、计算、比较等操作。
不可变性:Day.js的日期对象是不可变的,即每次对日期进行操作都会返回一个新的日期对象,而不会修改原始对象。这种设计模式有助于避免副作用,并提高代码的可预测性。
Moment.js兼容性:Day.js的API设计与Moment.js类似,因此可以很容易地从Moment.js迁移到Day.js,而无需更改太多代码。
安装Day.js
可以使用npm或yarn等包管理工具来安装Day.js。在项目目录下运行以下命令安装Day.js:
npm install dayjs
导入Day.js
在JavaScript文件中导入Day.js:
import dayjs from 'dayjs';
使用Day.js函数
使用Day.js的函数来进行日期操作。以下是一些示例:
const date = dayjs();

// 格式化日期
const formattedDate = date.format('YYYY-MM-DD');
console.log(formattedDate); // 输出:2023-07-04

// 解析日期字符串
const parsedDate = dayjs('2023-07-04');
console.log(parsedDate); // 输出:Tue Jul 04 2023 00:00:00 GMT+0530 (India Standard Time)

// 计算日期之间的差异
const startDate = dayjs('2023-07-01');
const endDate = dayjs('2023-07-10');
const diff = endDate.diff(startDate, 'day');
console.log(diff); // 输出:9
在上述示例中,使用了format()函数将日期格式化为指定的字符串格式,使用了dayjs()函数解析日期字符串为日期对象,以及使用了diff()函数计算两个日期之间的天数差异。

Luxon
Luxon 是一个用于处理日期、时间和时区的先进 JavaScript 库。它提供了一组强大的功能,可以帮助你在浏览器和 Node.js 环境中轻松处理日期和时间。

以下是 Luxon 的特点:
强大的日期和时间处理:Luxon 提供了丰富的 API,用于解析、格式化、操作和比较日期和时间。它支持多种标准和自定义的日期和时间格式,包括 ISO 8601、RFC 2822 等。
支持时区处理:Luxon 支持全球各地的时区,并提供了灵活的时区转换功能。它使用 IANA(Olson)时区数据库,确保准确的时区信息。
不可变性:Luxon 的日期对象是不可变的,每次对日期进行操作都会返回一个新的日期对象,而不会修改原始对象。这种设计模式有助于避免副作用,并提高代码的可预测性。
链式调用:Luxon 的 API 允许你使用链式调用,使得代码更简洁、易读。你可以按顺序执行多个操作,而无需多次引用日期对象。
安装 Luxon
使用 npm 或 yarn 等包管理工具,在项目目录下运行以下命令安装 Luxon:
npm install luxon
导入 Luxon
在 JavaScript 文件中导入 Luxon:
import { DateTime } from 'luxon';

使用 Luxon 函数
使用 Luxon 的函数来处理日期和时间。以下是一些示例:
const now = DateTime.now();

// 格式化日期
const formattedDate = now.toFormat('yyyy-MM-dd');
console.log(formattedDate); // 输出:2023-07-07

// 解析日期字符串
const parsedDate = DateTime.fromISO('2023-07-07');
console.log(parsedDate); // 输出:DateTime { ... }

// 计算日期之间的差异
const startDate = DateTime.fromISO('2023-07-01');
const endDate = DateTime.fromISO('2023-07-10');
const diff = endDate.diff(startDate, 'days').toObject().days;
console.log(diff); // 输出:9
在上述示例中,使用了 toFormat() 函数将日期格式化为指定的字符串格式,使用了 fromISO() 函数解析 ISO 8601 格式的日期字符串为日期对象,以及使用了 diff() 函数计算两个日期之间的天数差异。
用户评论