能否将antd TimePicker的小时范围从00-23自定义为00-99？

antd的TimePicker默认依赖Dayjs处理时间，而Dayjs的HH格式仅支持00-23的标准小时范围，同时组件的默认面板也是基于标准时间渲染的，因此无法直接通过TimePicker的原生配置实现00-99的小时选择，但可以通过自定义组件的方式来实现需求。

可行方案：自定义时间选择器（Dropdown + Input） #

由于标准日期库不支持超过23的小时，我们需要放弃用Dayjs存储时间值，改用字符串直接存储自定义格式的时间，同时通过Dropdown实现自定义的小时/分钟选择面板：

import React, { useState } from "react";
import { Input, Dropdown, Menu } from "antd";
import { DownOutlined } from "@ant-design/icons";

const CustomTimePicker: React.FC = () => {
  const [timeValue, setTimeValue] = useState<string>("");
  // 生成00-99的小时选项
  const hourOptions = Array.from({ length: 100 }, (_, idx) => idx.toString().padStart(2, "0"));
  // 生成00-59的分钟选项
  const minuteOptions = Array.from({ length: 60 }, (_, idx) => idx.toString().padStart(2, "0"));

  const handleHourSelect = (hour: string) => {
    const [, currentMinute] = timeValue.split(":");
    setTimeValue(`${hour}:${currentMinute || "00"}`);
  };

  const handleMinuteSelect = (minute: string) => {
    const [currentHour] = timeValue.split(":");
    setTimeValue(`${currentHour || "00"}:${minute}`);
  };

  const selectMenu = (
    <Menu>
      <Menu.SubMenu title="小时">
        {hourOptions.map(hour => (
          <Menu.Item key={hour} onClick={() => handleHourSelect(hour)}>
            {hour}
          </Menu.Item>
        ))}
      </Menu.SubMenu>
      <Menu.SubMenu title="分钟">
        {minuteOptions.map(minute => (
          <Menu.Item key={minute} onClick={() => handleMinuteSelect(minute)}>
            {minute}
          </Menu.Item>
        ))}
      </Menu.SubMenu>
    </Menu>
  );

  return (
    <Dropdown overlay={selectMenu} trigger={["click"]}>
      <Input
        value={timeValue}
        onChange={(e) => setTimeValue(e.target.value)}
        placeholder="HH:mm"
        suffix={<DownOutlined />}
        style={{ width: 120 }}
      />
    </Dropdown>
  );
};

export default CustomTimePicker;

方案说明 #

1. 放弃使用Dayjs存储时间：因为Dayjs会自动将超过23的小时转换为次日的小时（比如24:00会被解析为00:00+1天），无法保留自定义的小时值，因此直接用字符串存储HH:mm格式的时间。
2. 自定义选择面板：通过antd的Dropdown组件实现下拉选择菜单，手动生成00-99的小时选项和00-59的分钟选项，完全自定义选择范围。
3. 输入框兼容手动输入：支持用户直接在输入框中输入符合格式的时间，同时下拉选择可以快速定位选项。

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