如何在ReactJS（Next.js框架）中修改博客日期格式

问题描述 #

我正在使用ReactJS及Next.js框架开发项目，通过循环获取博客数据后，需要调整日期展示格式。现有代码如下：

{user && user.length > 0 && user.map((userObj, index) => (
  <NewsCard
    key={index}
    img={userObj.image}
    title={userObj.title}
    date={userObj.CreatedAt}   // 当前获取的日期示例："2023-03-26 01:40:26"
  />
))}

目前拿到的日期格式为"2023-03-26 01:40:26"，想要改成April 29,2023的格式，该怎么实现？

解决方案 #

方法1：自定义格式化函数（原生Date API） #

自己实现一个简单的日期转换函数，手动映射月份名称：

const formatDate = (dateString) => {
  const monthNames = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];
  const date = new Date(dateString);
  // 处理无效日期的情况
  if (isNaN(date.getTime())) return "Invalid Date";
  
  const month = monthNames[date.getMonth()];
  const day = date.getDate();
  const year = date.getFullYear();
  
  return `${month} ${day},${year}`;
};

在组件中调用该函数：

{user && user.length > 0 && user.map((userObj, index) => (
  <NewsCard
    key={index}
    img={userObj.image}
    title={userObj.title}
    date={formatDate(userObj.CreatedAt)}
  />
))}

方法2：使用Intl.DateTimeFormat（推荐，支持本地化） #

利用浏览器原生的Intl API实现更优雅的格式化，还能轻松适配多语言：

const formatDate = (dateString) => {
  const date = new Date(dateString);
  if (isNaN(date.getTime())) return "Invalid Date";
  
  // 先生成带空格的格式，再替换掉逗号后的空格以匹配需求
  return new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric"
  }).format(date).replace(", ", ",");
};

调用方式和方法1完全一致，这种方式无需手动维护月份数组，代码更简洁。

注意事项 #

• 确保userObj.CreatedAt是合法的日期字符串，否则new Date()会返回无效日期，建议加入无效日期的判断逻辑。
• 在Next.js的SSR/SSG场景下，Intl API完全支持，无需额外配置。

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