react中monent如何获取日期

使用 Moment.js 获取当前日期

在 React 中通过 Moment.js 获取当前日期可以直接调用 moment()。返回的对象包含当前系统的日期和时间信息。

import moment from 'moment';

const currentDate = moment();
console.log(currentDate.format('YYYY-MM-DD')); // 输出格式如 "2023-10-05"

格式化日期输出

Moment.js 提供 format() 方法，支持自定义日期显示格式。常用占位符包括：

• YYYY：四位年份
• MM：两位月份
• DD：两位日期
• HH：24小时制小时
• mm：分钟

const formattedDate = moment().format('MMMM Do YYYY, h:mm:ss a');
// 输出示例："October 5th 2023, 3:25:30 pm"

解析字符串为日期

使用 moment(String) 可以将符合 ISO 8601 或 RFC 2822 标准的字符串转换为日期对象。支持手动指定格式：

const parsedDate = moment('2023-10-05', 'YYYY-MM-DD');
console.log(parsedDate.isValid()); // 检查是否解析成功

计算相对时间

通过 fromNow() 或 diff() 实现时间差计算：

// 相对当前时间的描述
console.log(moment('2023-10-01').fromNow()); // 输出如 "4 days ago"

// 计算两个日期的差值（单位：天）
const daysDiff = moment('2023-10-10').diff(moment(), 'days');

操作日期

Moment.js 支持链式调用增减日期：

const nextWeek = moment().add(7, 'days');
const lastMonth = moment().subtract(1, 'months');

时区处理

需安装 moment-timezone 扩展库处理时区：

import moment from 'moment-timezone';

const newYorkTime = moment().tz('America/New_York');
console.log(newYorkTime.format());

替代方案（现代项目推荐）

由于 Moment.js 已进入维护模式，新项目建议使用以下替代方案：

• date-fns：模块化日期库

  import { format } from 'date-fns';
  format(new Date(), 'yyyy-MM-dd');

• Day.js：轻量级 Moment.js 替代

  import dayjs from 'dayjs';
  dayjs().format('YYYY-MM-DD');

注意事项

1. 在 React 组件中使用时，建议将日期操作逻辑放在 useEffect 或状态管理中
2. 频繁的日期计算可能导致性能问题，应考虑节流或缓存策略
3. 服务端渲染（SSR）时需确保时区一致性