React-Admin中如何实现仅输入时间的TimeInput功能

React-Admin 本身没内置开箱即用的纯时间选择输入组件，但是有两种很稳定的落地方案，完全能满足需求：

• 轻量无依赖方案：自行封装适配React-Admin规则的TimeInput
  直接用HTML原生的时间输入标签，配合React-Admin官方提供的useInput钩子做适配，就能和其他官方输入组件一样正常用在表单里，不用额外装第三方包，参考代码：

  import { useInput } from 'react-admin';
  
  const TimeInput = (props) => {
    const { field } = useInput(props);
    return (
      <div>
        <label htmlFor={props.source}>{props.label}</label>
        <input type="time" id={props.source} {...field} />
      </div>
    )
  }
  
  // 表单里直接调用即可
  <TimeInput source="work_start_time" label="上班时间" />
  

  原生输入默认精度是分钟，输出HH:mm格式的字符串，要支持秒级选择给input标签加个step="1"属性就行，输出会变成HH:mm:ss格式，所有现代浏览器都兼容。
• 高定制需求方案：对接第三方时间选择组件
  如果需要更复杂的交互，比如自定义时间间隔、12/24小时制切换、快捷时间选项，可以选你常用的React时间选择组件，同样用useInput钩子对接适配，就能直接打通React-Admin自带的表单校验、数据提交、回显逻辑，不用自己处理复杂的表单状态。

踩坑提醒：如果你的后端字段存的是时间戳类型，记得在数据提交和回显的时候做格式转换——纯时间输入拿到的是不带日期的时间字符串，要自己拼接统一的日期基准值再转成对应存储格式，避免时区导致的时间偏移问题。

官方自带的日期+时间双选DateTimeInput组件用法如下，和自定义的TimeInput使用逻辑完全一致：

import { DateTimeInput } from 'react-admin';

<DateTimeInput source="published_at" />

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