在React中使用Moment.js格式化指定格式日期的方法

实现两种格式的方法 #

Moment.js通过自定义格式字符串生成目标日期格式，核心是用方括号[]转义固定文本（避免被解析为日期格式符），结合日期格式符组合即可：

1. 格式 [2022m12d23]
   使用格式字符串 '[YYYY[m]MM[d]DD]'：

   • YYYY：输出4位年份
   • [m]：直接输出小写字母m
   • MM：输出两位月份（01-12）
   • [d]：直接输出小写字母d
   • DD：输出两位日期（01-31）
   • 外层[]：直接输出包裹日期的方括号

2. 格式 [2022m12]
   使用格式字符串 '[YYYY[m]MM]'，仅保留年份、固定m和两位月份即可。

React项目中的使用示例 #

首先确保已安装Moment.js：

npm install moment
# 或
yarn add moment

在组件中导入并使用：

import React from 'react';
import moment from 'moment';

const DateFormatter = () => {
  // 可替换为你需要处理的目标日期（如时间戳、日期字符串等）
  const targetDate = '2022-12-23';

  const fullDate = moment(targetDate).format('[YYYY[m]MM[d]DD]');
  const yearMonth = moment(targetDate).format('[YYYY[m]MM]');

  return (
    <div>
      <p>完整格式：{fullDate}</p>
      <p>年月格式：{yearMonth}</p>
    </div>
  );
};

export default DateFormatter;

运行后会输出：

• 完整格式：[2022m12d23]
• 年月格式：[2022m12]

内容的提问来源于stack exchange，提问作者Aya Abdessalem