React JS中如何去除日期的时间部分仅显示日期？

针对React组件里student.date字段包含时间信息、需要仅显示日期的需求，以下几种方案可以按需选择：

方案1：字符串分割（最简便，适合固定格式的日期字符串） #

如果你的student.date是ISO标准格式的字符串（比如"2024-05-20T14:30:00"），直接用字符串分割就能快速提取日期部分：

<td>{student.date.split('T')[0]}</td>

如果日期字符串用空格分隔时间（比如"2024-05-20 14:30:00"），把分隔符换成空格即可：

<td>{student.date.split(' ')[0]}</td>

方案2：原生Date对象自定义格式（灵活可控，无需额外依赖） #

如果需要自定义日期显示格式（比如中文格式"2024年5月20日"、两位月日格式"2024-05-20"），可以将字符串转为Date对象后处理：

方法A：使用toLocaleDateString #

<td>
  {new Date(student.date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })}
</td>

这个方法支持多语言，修改第一个参数（比如'en-US'）就能切换为英文格式。

方法B：手动拼接年月日 #

<td>
  {student.date ? (
    (() => {
      const date = new Date(student.date);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需+1并补零
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    })()
  ) : '-'}
</td>

这里加了空值判断，避免student.date为空时出现报错。

方案3：日期处理库（适合复杂场景，健壮性更高） #

如果项目中频繁涉及日期格式转换、时区处理或多语言需求，推荐使用轻量的date-fns库（替代已停止维护的moment.js）：

1. 先安装依赖：

npm install date-fns

2. 在组件中导入并使用：

import { format } from 'date-fns';

// 渲染表格单元格时
<td>{student.date ? format(new Date(student.date), 'yyyy-MM-dd') : '-'}</td>

date-fns支持丰富的格式语法，还能轻松处理相对时间、时区转换等复杂场景，代码可读性更高。

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