React MUI中type=time的TextField未按输入格式传值问题

HTML原生的type="time"输入框，无论显示的是12小时制带AM/PM的样式，实际返回的都是24小时制的HH:mm格式字符串，这就是你提交时只能拿到hh:mm的原因。下面提供两种解决方法：

方法一：提交时转换时间格式 #

通过自定义函数，把原生输入框返回的24小时制时间转成12小时制带AM/PM的格式，再提交给后端。

1. 新增时间格式化函数：

// 将HH:mm格式转换为hh:mm AM/PM格式
const formatTo12HourTime = (time) => {
  if (!time) return '';
  const [hours, minutes] = time.split(':');
  const hourNum = parseInt(hours, 10);
  const period = hourNum >= 12 ? 'PM' : 'AM';
  // 把0点转为12点，13点转为1点，以此类推
  const formattedHour = hourNum % 12 || 12;
  return `${formattedHour.toString().padStart(2, '0')}:${minutes} ${period}`;
};

2. 修改Formik的提交逻辑：

onSubmit: async (values, action) => {
  try {
    // 转换时间格式后再提交
    const formattedStartTime = formatTo12HourTime(values.startTime);
    let response = await axios.patch(
      `${state.baseUrl}plan`,
      { start_time: formattedStartTime },
    );
    // 后续逻辑...
  } catch (err) {
    // 错误处理
  }
}

方法二：使用MUI时间选择器组件（更灵活） #

放弃原生type="time"输入框，改用MUI官方的@mui/x-date-pickers组件，直接配置12小时制格式，实时获取带AM/PM的时间值。

1. 先安装依赖：

npm install @mui/x-date-pickers dayjs

2. 引入并使用组件：

import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';

// 扩展dayjs的格式化能力
dayjs.extend(advancedFormat);

// 在组件中替换原TextField
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <TimePicker
    name="startTime"
    id="startTime"
    // 初始化值（如果有）
    value={values.startTime ? dayjs(values.startTime, 'hh:mm A') : null}
    onChange={(newValue) => {
      // 把选中的时间转成hh:mm AM/PM格式后更新Formik的值
      handleChange({
        target: {
          name: 'startTime',
          value: newValue ? newValue.format('hh:mm A') : ''
        }
      });
    }}
    // 设置显示和输入的格式
    format="hh:mm A"
  />
</LocalizationProvider>

这样提交时values.startTime直接就是hh:mm AM/PM格式，无需额外转换。

两种方法对比：

• 方法一：保留原生输入框的系统级交互，仅在提交环节转换格式，适合不需要实时展示带AM/PM值的场景。
• 方法二：完全控制时间的显示和输入格式，交互更统一，适合需要用户明确看到AM/PM标识的场景。

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