React中如何截取ISO日期字符串仅保留YYYY-MM-DD年月日格式

你当前拿到的是标准ISO 8601格式的日期字符串，可通过以下两种方案实现需求：

方案1：直接截取字符串（最简实现，UTC日期） #

ISO 8601格式YYYY-MM-DDTHH:mm:ss.sssZ的前10位正好是你需要的YYYY-MM-DD格式，直接调用字符串截取方法即可：

<td>
    {term.startDate?.slice(0, 10)}
</td>
<td>
    {term.endDate?.slice(0, 10)}
</td>

加可选链?.是为了避免日期字段为空时页面报错。

方案2：Date对象格式化（适配本地时区，扩展性更强） #

如果需要显示本地时区的日期，或者后续要调整格式更灵活，可以封装日期格式化工具函数：

// 封装通用日期格式化函数，可放在公共工具文件中
const formatISODate = (isoStr) => {
  if (!isoStr) return '';
  const date = new Date(isoStr);
  // 若需要UTC日期，将下方方法替换为getUTCFullYear、getUTCMonth、getUTCDate即可
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

表格中调用函数即可：

<td>
    {formatISODate(term.startDate)}
</td>
<td>
    {formatISODate(term.endDate)}
</td>

修改后完整表格代码 #

<table className="table terms-table">
    <thead>
        <tr>                                   
            <th scope="col" >start Date</th>
            <th scope="col" >end Date</th>
        </tr>
    </thead>
    <tbody>
        {termsData.map(term =>
        (
            <tr key={term._id}>                                   
                <td>
                    {term.startDate?.slice(0,10)}
                </td>
                <td>
                    {term.endDate?.slice(0,10)}
                </td>
            </tr>
        ))}
    </tbody>
</table>

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