react Moment.js 是一个流行的 JavaScript 库,用于处理日期和时间。它提供了丰富的功能,包括日期格式化、解析、操作和国际化

Moment.js 是一个流行的 JavaScript 库,用于处理日期和时间。它提供了丰富的功能,包括日期格式化、解析、操作和国际化。

尽管 Moment.js 已被官方声明进入维护模式,推荐使用轻量的库(如 day.js 或 date-fns),但 Moment.js 在很多项目中依然广泛使用。以下是它的核心用法:

1. 安装 Moment.js

浏览器引入

在 HTML 文件中通过 CDN 引入:

bash 复制代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

Node.js 安装

bash 复制代码
npm install moment

在代码中使用:

bash 复制代码
const moment = require('moment');

如果你使用 ES6 模块:

js 复制代码
import moment from 'moment';

2. 常用功能

2.1 当前时间

获取当前日期和时间:

js 复制代码
const now = moment();
console.log(now.toString()); // 示例:Wed Dec 19 2024 18:00:00 GMT+0800

2.2 日期格式化

将日期转换为自定义格式:

js 复制代码
const formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate); // 示例:2024-12-19 18:00:00

常见格式:

格式符号 含义 示例

YYYY 四位年份 2024

MM 月份(两位数) 12

DD 日期(两位数) 19

HH 小时(24 小时制) 18

mm 分钟 00

ss 秒 00

dddd 星期几 Thursday

2.3 解析日期

从字符串解析为日期:

bash 复制代码
const parsedDate = moment("2024-12-19", "YYYY-MM-DD");
console.log(parsedDate.toString()); // 示例:Thu Dec 19 2024 00:00:00 GMT+0800

支持多种输入格式:

js 复制代码
moment("2024-12-19"); // 自动解析
moment("12-19-2024", "MM-DD-YYYY"); // 指定格式解析

2.4 操作日期

可以对日期进行加减操作:

js 复制代码
const nextWeek = moment().add(7, 'days');
console.log(nextWeek.format('YYYY-MM-DD')); // 示例:2024-12-26

const lastMonth = moment().subtract(1, 'months');
console.log(lastMonth.format('YYYY-MM-DD')); // 示例:2024-11-19

支持的单位:

days(天)、months(月)、years(年)

hours(小时)、minutes(分钟)、seconds(秒)

2.5 日期比较

比较两个日期

js 复制代码
const isBefore = moment("2024-12-18").isBefore("2024-12-19");
console.log(isBefore); // true

const isSame = moment("2024-12-19").isSame("2024-12-19");
console.log(isSame); // true

计算时间差

js 复制代码
const start = moment("2024-12-18");
const end = moment("2024-12-19");
const diff = end.diff(start, 'days'); // 差异单位可以是 days, months, years
console.log(diff); // 1

2.6 本地化

Moment.js 支持多种语言,本地化日期和时间:

js 复制代码
moment.locale('zh-cn'); // 设置为中文
console.log(moment().format('LLLL')); // 示例:2024年12月19日星期四 18:00

设置回英文:

js 复制代码
moment.locale('en');

3. 替代 Moment.js 的库

由于 Moment.js 的体积较大,且对现代 JavaScript 的支持不够优化,官方推荐以下替代库:

Day.js:

语法类似于 Moment.js,但体积更小。

安装:

bash 复制代码
npm install dayjs

示例:

js 复制代码
import dayjs from 'dayjs';
console.log(dayjs().format('YYYY-MM-DD'));

date-fns:

函数式日期处理库。

安装:

bash 复制代码
npm install date-fns

示例:

js 复制代码
import { format } from 'date-fns';
console.log(format(new Date(), 'yyyy-MM-dd'));

4. 注意事项

性能优化: 如果只需要简单的日期处理(如格式化、加减时间),可以考虑使用轻量的库。

Moment.js 版本: 使用最新版本(如 2.29.x)以确保兼容性。

Moment.js 依然是一个强大的日期处理工具,尤其在需要复杂操作时非常方便。

相关推荐
shawxlee11 分钟前
vue3+axios挑战最简洁实用的配置封装+接口调用:请求拦截器、响应拦截器、通用请求方法(单个请求/并发请求/下载文件)、统一接口管理
前端·经验分享·vue·接口·axios·api
yuhaiqiang37 分钟前
上线一个人静态网站需要多少钱,难不难?
前端·后端·程序员
宸津-代码粉碎机42 分钟前
Jar热部署进阶实战|修复原生方案OOM与类冲突问题,生产级无BUG优化方案
java·大数据·服务器·开发语言·前端·人工智能·python
To_OC9 小时前
写了三遍 Todo List,我终于搞懂了 React 父子组件到底怎么通信
前端·javascript·react.js
勇往直前plus9 小时前
Vue3(篇一) 核心概念——响应式模板语法与组件基础
前端·javascript·vue.js
咩咩啃树皮10 小时前
第43篇:Vue3计算属性(computed)完全精讲——缓存机制、依赖计算、业务最优解
前端·vue.js·缓存
用户9385156350711 小时前
从零搭建 AI 日记助手:用 Milvus 向量数据库 + RAG 让机器读懂你的每一天
javascript·人工智能·全栈
徐小夕12 小时前
花了一周,3亿tokens,我开源了一款 Word 文档智能审查平台,文稿自动质检+可视化分析,告别低效人工审核
前端·算法·github
a11177612 小时前
坦克大战3D Three.js 3D (开源项目)
开发语言·javascript·3d
kyriewen13 小时前
别再乱用useEffect了——你写的10个里有8个不该存在
前端·javascript·react.js