React Native中如何格式化时间为带AM/PM的12小时制格式？

你原有时间处理代码存在两处问题：

• 存在语法错误：d.getMinutes()后缺少模板字符串闭合的}，会直接导致代码运行报错
• 默认输出24小时制时间，没有AM/PM标识，不符合目标效果

直接替换时间处理逻辑即可，页面渲染层代码无需调整结构。

修改后的时间处理代码 #

const d = new Date(eventData.ends_on);
// 获取原始24小时制小时
let hours = d.getHours();
// 判定上下午标识
const dayPeriod = hours >= 12 ? 'PM' : 'AM';
// 转换为12小时制
hours = hours % 12;
// 0点转换为12
hours = hours || 12;
// 分钟、秒补前导零，避免出现9:3:2这种不规范显示
const minutes = d.getMinutes().toString().padStart(2, '0');
const seconds = d.getSeconds().toString().padStart(2, '0');
// 拼接最终时间字符串
const endTime = `${hours}:${minutes}:${seconds} ${dayPeriod}`;

可选调整 #

• 如果不需要显示秒数，直接把拼接字符串里的:${seconds}删除即可，输出格式为时:分 AM/PM
• 如果不需要前导补零，去掉padStart相关逻辑，直接使用d.getMinutes()、d.getSeconds()取值即可

集成方式 #

你现有的页面渲染代码不需要做结构改动，将上述逻辑计算得到的endTime变量按原有写法传入{endTime}位置即可正常渲染目标格式的时间。

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