JavaScript PERN项目中如何修改HTML表格td标签内的日期显示格式

你不需要修改浏览器配置——浏览器日期显示跟随用户系统区域设置，无法做到全用户统一展示效果，直接在渲染链路（前端渲染/后端查询）处理即可，两种常用实现方式如下：

方案1：前端渲染阶段格式化（无依赖，灵活度高） #

直接在React渲染表格单元格时，对ISO格式的日期字符串做格式化处理，匹配你需要的显示规则。

1. 先在ListTodo.js里定义通用日期格式化函数，针对纯日期字段建议取UTC时间值，避免时区偏移导致的日期差1天问题：

// 默认输出格式：YYYY-MM-DD，和你的date输入框格式完全匹配
const formatDate = (isoString) => {
  const date = new Date(isoString);
  const year = date.getUTCFullYear();
  const month = String(date.getUTCMonth() + 1).padStart(2, '0');
  const day = String(date.getUTCDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;

  // 如果需要显示为「2022年07月07日」这类本地化格式，直接修改返回值拼接规则即可
  // return `${year}年${month}月${day}日`
};

2. 替换原来直接渲染原始日期值的表格单元格代码：

// 原代码 <td>{todo.date_visit}</td>
// 替换为
<td>{formatDate(todo.date_visit)}</td>

如果需要带时分秒展示，只要在函数里补充getUTCHours/getUTCMinutes/getUTCSeconds的补0拼接逻辑即可。

方案2：后端查询阶段直接格式化（前端零处理） #

在Node.js侧查询PostgreSQL数据时，直接用数据库内置的TO_CHAR函数把date类型转成目标格式字符串，前端拿到数据后可以直接渲染，不需要额外处理。
查询SQL示例：

SELECT
  todo_id,
  description,
  description2,
  visitor_name,
  -- 直接把日期格式化为YYYY-MM-DD字符串返回
  TO_CHAR(date_visit, 'YYYY-MM-DD') AS date_visit
FROM todos;

这种方式返回给前端的date_visit字段本身就是格式化好的字符串，原来的渲染代码<td>{todo.date_visit}</td>不需要做任何修改。

注意：不要尝试通过修改浏览器配置实现格式统一，该配置跟随用户系统语言/区域设置，不同用户访问时显示效果不可控，无法满足项目统一展示的需求。

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