react-multi-date-picker time_picker手动输入12点AM自动转PM问题求解决

这个问题是组件默认时间解析逻辑的bug，以下是几个可行的解决办法：

1. 自定义时间解析函数覆盖默认逻辑 #

组件支持通过parseTime属性传入自定义解析函数，我们可以手动处理12:00-12:59 AM的特殊情况，确保AM不被转换：

import TimePicker from "react-multi-date-picker/plugins/time_picker";

const customParseTime = (timeString) => {
  // 匹配12:xx AM或12:xx:xx AM的格式
  const am12Match = timeString.match(/^12:(\d{2})(?::(\d{2}))?\s*AM$/i);
  
  if (am12Match) {
    const minutes = parseInt(am12Match[1], 10);
    const seconds = am12Match[2] ? parseInt(am12Match[2], 10) : 0;
    
    return {
      hours: 0, // 12 AM对应24小时制的0点
      minutes,
      seconds,
      meridiem: "AM"
    };
  }

  // 其他情况复用组件默认解析逻辑
  return TimePicker.defaultProps.parseTime(timeString);
};

// 使用自定义解析器
<TimePicker
  parseTime={customParseTime}
  format="hh:mm:ss A"
  // 其他配置项
/>

2. 手动监听输入并修正显示值 #

通过组件的onInput和onChange事件，手动控制输入值的显示，避免自动转换：

import { useState } from "react";
import TimePicker from "react-multi-date-picker/plugins/time_picker";

function FixedTimePicker() {
  const [timeStr, setTimeStr] = useState("");

  const handleInput = (e) => {
    let value = e.target.value.trim();
    // 检测到12:xx AM时直接保留原值
    if (/^12:\d{2}(?::\d{2})?\s*AM$/i.test(value)) {
      setTimeStr(value);
    } else {
      setTimeStr(value);
    }
  };

  const handleChange = (timeObj) => {
    // 将时间对象转换为正确的12小时制字符串
    let hours = timeObj.hours === 0 ? 12 : timeObj.hours % 12;
    let meridiem = timeObj.hours < 12 ? "AM" : "PM";
    
    let formatted = `${hours}:${String(timeObj.minutes).padStart(2, "0")}`;
    if (timeObj.seconds !== undefined) {
      formatted += `:${String(timeObj.seconds).padStart(2, "0")}`;
    }
    formatted += ` ${meridiem}`;
    
    setTimeStr(formatted);
  };

  return (
    <TimePicker
      value={timeStr}
      onInput={handleInput}
      onChange={handleChange}
      format="hh:mm:ss A"
      // 其他配置项
    />
  );
}

3. 跟进官方修复 #

这个问题在官方示例中也存在，属于组件已知bug。你可以去组件的GitHub仓库提交issue反馈，同时检查是否有最新版本已经修复了该问题。如果官方发布修复版本，直接升级即可。

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