如何修改React-Redux项目中time类型输入框的时间格式为12小时制

HTML5 type="time" 输入框的返回值固定为HH:mm格式的24小时制字符串，你只需要新增一个时间格式化工具函数，把原始24小时制字符串转换为12小时制格式即可。

具体实现步骤 #

• 新增时间格式化函数

const formatTo12Hour = (timeStr) => {
  if (!timeStr) return ''
  // 拆分小时和分钟
  const [hour, minute] = timeStr.split(':').map(Number)
  // 判断AM/PM标识
  const period = hour >= 12 ? 'PM' : 'AM'
  // 换算12小时制的小时数
  const displayHour = hour % 12 || 12
  // 补零处理分钟，返回最终格式
  return `${displayHour}:${minute.toString().padStart(2, '0')} ${period}`
}

• 在渲染阶段调用格式化函数
  你原有的输入框逻辑不需要修改，仅调整渲染时间的部分即可：

state = {
    time: ''
}
render = () => {
    return (
      <span>{formatTo12Hour(this.state.time)}</span>
    )
}

效果说明 #

如果用户选中的时间为14:30，最终会展示为2:30 PM；如果选中时间为00:05，最终会展示为12:05 AM，完全符合12小时制的展示习惯。

内容的提问来源于stack exchange，提问作者Qatr El-Nada