React JS中如何从当前日期提取时间并转换24小时制为12小时制

你无需手动拆分原始日期字符串提取时间，直接基于你存储的Date对象处理即可，两种常用实现方案如下：

方案1：使用内置国际化API（代码最简） #

直接调用Date实例的toLocaleTimeString方法，通过配置参数直接生成符合要求的格式：

// 工具函数：传入Date对象，返回12小时制时间字符串（格式H:MM:SS）
const get12HourTime = (date) => {
  return date.toLocaleTimeString('en-US', {
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
    hour12: true
  }).replace(/\s[AP]M$/, ''); // 不需要AM/PM后缀保留这行，需要的话删除即可
};

如果你的输入是原始日期字符串，先转成Date对象再调用即可：

const rawDateStr = 'Mon Oct 04 2021 17:13:49 GMT+0530 (India Standard Time)';
const time = get12HourTime(new Date(rawDateStr)); // 输出结果：5:13:49

方案2：手动计算拼接（灵活性更高） #

如果需要自定义格式规则，可以手动取时间字段拼接：

const get12HourTime = (date) => {
  let hour = date.getHours();
  const minute = String(date.getMinutes()).padStart(2, '0');
  const second = String(date.getSeconds()).padStart(2, '0');
  // 处理12小时制转换，0点转为12，其余时间模12即可
  hour = hour % 12 || 12;
  return `${hour}:${minute}:${second}`;
};

结合你现有代码的使用示例 #

你可以在取值的时候实时转换，也可以在存储的时候直接保存格式化后的结果：

import { useState } from 'react';

// 上面选一种工具函数放在这里
const get12HourTime = (date) => {
  // 函数实现
};

const YourComponent = () => {
  const [timerState, setTimerState] = useState({});

  const handleStart = () => {
    const now = new Date();
    setTimerState({ 
      ...timerState, 
      start: now,
      // 如果需要直接存格式化后的结果可以加这行
      startTimeStr: get12HourTime(now)
    });
    
    // 取值时调用示例
    console.log(get12HourTime(now)); // 输出对应12小时制时间
  };

  // 渲染逻辑
  return <div>{timerState.start && get12HourTime(timerState.start)}</div>
};

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