当前位置:首页 > React

react中monent如何获取日期

2026-02-25 21:42:36React

使用 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:分钟
  • ss:秒
    const formattedDate = moment().format('YYYY年MM月DD日 HH:mm:ss');
    console.log(formattedDate); // 输出如 "2023年10月05日 14:30:15"

获取特定日期

通过传递参数给 moment(),可以解析特定日期字符串或日期对象。

// 解析字符串
const customDate = moment('2023-12-25');
console.log(customDate.format('MMMM Do YYYY')); // 输出 "December 25th 2023"

// 解析日期对象
const jsDate = new Date();
const momentDate = moment(jsDate);

操作日期(加减)

使用 add()subtract() 方法调整日期:

const tomorrow = moment().add(1, 'day'); // 加1天
const lastWeek = moment().subtract(7, 'days'); // 减7天

获取日期部分

提取日期的年、月、日等部分:

react中monent如何获取日期

const year = moment().year(); // 获取年份
const month = moment().month() + 1; // 获取月份(0-11,需+1)
const day = moment().date(); // 获取日期

注意事项

  • Moment.js 已进入维护模式,推荐使用现代替代库如 date-fnsday.js
  • 在 React 中频繁更新日期时,需结合 useStateuseEffect 管理状态。

标签: 日期react
分享给朋友:

相关文章

如何react页面

如何react页面

创建 React 页面 使用 create-react-app 快速初始化项目: npx create-react-app my-app cd my-app npm start 编写组件代码 在 s…

react如何卸载

react如何卸载

卸载 React 项目或依赖 如果需要完全卸载 React 项目或相关依赖,可以按照以下步骤操作: 删除项目文件夹 直接删除整个项目文件夹是最彻底的方式。确保已备份重要代码或配置文件。 卸载全局安…

react 如何遍历

react 如何遍历

遍历数组 在React中遍历数组通常使用map方法,它会返回一个新的数组。map是处理数组并渲染列表元素的首选方法。 const items = ['Apple', 'Banana', 'Cherr…

react 如何操作cookie

react 如何操作cookie

安装依赖 在React项目中操作cookie通常需要第三方库的支持,推荐使用js-cookie。通过npm或yarn安装: npm install js-cookie # 或 yarn add js…

如何读react源码

如何读react源码

理解React源码的结构 React源码托管在GitHub上,主要分为几个核心模块:react、react-dom、react-reconciler等。react包包含核心API和组件逻辑,react…

react 如何获取dom

react 如何获取dom

获取 DOM 的方法 在 React 中,可以通过 useRef 或 createRef 来获取 DOM 节点。useRef 是函数组件中常用的方法,而 createRef 通常用于类组件。 使用…