React日期时间格式化：如何转换API返回的日期格式

以下是几种在React项目中实现日期格式化的实用方案：

方案一：原生JavaScript手动处理 #

适合不想引入第三方库的场景，手动解析日期并补零：

// 定义通用格式化函数
const formatDate = (dateString) => {
  const date = new Date(dateString);
  // 处理日期、月份（注意月份是0索引，需+1）、年份
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  // 处理时分秒，确保两位数
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
};

// 在组件中调用
render() {
  const openWhen = this.props.proposal.OPENWHEN;
  const formattedDate = openWhen ? formatDate(openWhen) : 'N/A';
  return (
    <div>Created:&nbsp;{formattedDate}</div>
  );
}

方案二：使用原生Intl.DateTimeFormat API #

利用浏览器内置的国际化API，无需手动补零，代码更简洁：

const formatDate = (dateString) => {
  if (!dateString) return 'N/A';
  const date = new Date(dateString);
  return new Intl.DateTimeFormat('en-GB', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hourCycle: 'h23' // 强制使用24小时制
  }).format(date);
};

// 组件中使用方式同方案一

en-GB locale默认会输出DD/MM/YYYY格式的日期，hourCycle: 'h23'确保小时以00-23的格式显示。

方案三：使用第三方日期库（如date-fns或moment.js） #

如果项目已经依赖日期处理库，可以快速实现格式化：

使用date-fns（轻量推荐） #

import { format } from 'date-fns';

// 在组件中使用
render() {
  const formattedDate = this.props.proposal.OPENWHEN 
    ? format(new Date(this.props.proposal.OPENWHEN), 'dd/MM/yyyy HH:mm:ss')
    : 'N/A';
  return <div>Created:&nbsp;{formattedDate}</div>;
}

使用moment.js #

import moment from 'moment';

// 在组件中使用
render() {
  const formattedDate = this.props.proposal.OPENWHEN 
    ? moment(this.props.proposal.OPENWHEN).format('DD/MM/YYYY HH:mm:ss')
    : 'N/A';
  return <div>Created:&nbsp;{formattedDate}</div>;
}

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