React项目中如何格式化数据库日期字段并拆分日期与时间

下面提供两种常用的实现思路，你可以根据项目实际情况选择： #

方案1：原生JavaScript实现（无额外依赖） #

无需引入第三方库，直接通过浏览器内置的Date API处理，适合对包体积敏感的场景：
首先封装通用转换函数：

// 入参为数据库返回的ISO格式日期字符串
const parseIsoDate = (isoStr) => {
  const targetDate = new Date(isoStr);
  // 格式化日期为 DD/MM/YYYY 格式
  const day = String(targetDate.getDate()).padStart(2, '0');
  const month = String(targetDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数需要+1
  const year = targetDate.getFullYear();
  // 格式化时间为 HH:MM 格式
  const hour = String(targetDate.getHours()).padStart(2, '0');
  const minute = String(targetDate.getMinutes()).padStart(2, '0');
  return {
    date: `${day}/${month}/${year}`,
    time: `${hour}:${minute}`
  }
}

在React组件中使用：

function DateDisplay({ createdAt }) {
  const { date, time } = parseIsoDate(createdAt);
  return (
    <div>
      <div>Date: {date}</div>
      <div>Hour: {time}</div>
    </div>
  )
}

注意：如果你需要展示UTC时间而非本地时区时间，把上述代码中的getDate/getMonth/getFullYear/getHours/getMinutes方法替换为对应的UTC版本：getUTCDate/getUTCMonth/getUTCFullYear/getUTCHours/getUTCMinutes即可。 #

方案2：使用轻量日期库实现（更稳定易维护） #

如果项目本身有较多日期处理需求，推荐使用dayjs、date-fns这类轻量日期库，无需自己处理补零、时区、日期边界等异常场景，出错概率更低：
以dayjs为例：

1. 安装依赖（已安装可跳过）

npm install dayjs

2. 组件中直接使用：

import dayjs from 'dayjs';
function DateDisplay({ createdAt }) {
  return (
    <div>
      <div>Date: {dayjs(createdAt).format('DD/MM/YYYY')}</div>
      <div>Hour: {dayjs(createdAt).format('HH:mm')}</div>
    </div>
  )
}

如果需要固定UTC时区，引入dayjs的utc插件即可使用UTC格式输出。

内容的提问来源于stack exchange，提问作者Young Al Capone