如何控制Material UI中type="time" TextField的时间选择器开关

AI 小北

2026-8-29

解决方案

原生input[type="time"]的选择器无法通过单纯调用focus()唤起，浏览器给这类内置选择器的输入框提供了专属的showPicker()原生方法，用这个方法就能实现需求，不需要替换成第三方时间选择器组件。

type="time"类型TextField展示效果

实现逻辑

点击任意区域唤起：给TextField绑定点击事件，触发时调用input实例的showPicker()方法即可，覆盖输入框边框、文本区域、图标区域的所有点击场景
代码控制开关：
- 打开选择器：任意业务逻辑里直接调用timeRef.current.showPicker()
- 关闭选择器：调用timeRef.current.blur()让输入框失焦，原生选择器会自动收起

改造后完整代码

<TextField
  sx={{
    width: "100%",
    height: "auto",
  }}
  type="time"
  InputLabelProps={{
    shrink: true,
  }}
  inputProps={{
    step: 60, // 1分钟步长
  }}
  inputRef={timeRef}
  value={logCleanRuntime}
  helperText={
    logCleanRuntimeError
      ? "Log Clean Runtime field cannot be empty"
      : ""
  }
  label="Log Clean Runtime"
  error={logCleanRuntimeError}
  fullWidth
  // 点击输入框任意区域触发选择器打开
  onClick={() => {
    if (timeRef.current) {
      // 做特性兼容，不支持showPicker的老浏览器降级为focus
      timeRef.current.showPicker 
        ? timeRef.current.showPicker() 
        : timeRef.current.focus()
    }
  }}
  onChange={(e) => {
    setFormChanged(true);
    setDirty();
    setLogCleanRuntime(e.target.value);
  }}
/>

如果需要在其他业务逻辑里手动控制开关，直接抽成公共方法调用即可：

// 手动打开
const handleOpenPicker = () => {
  timeRef.current?.showPicker?.() || timeRef.current?.focus()
}

// 手动关闭
const handleClosePicker = () => {
  timeRef.current?.blur()
}