这叫啥 UI？
← 返回组件目录

COMPONENT 83 · Text & File Inputs

时间输入框

Time Field

也叫Time InputTime Picker时间选择

独立输入小时和分钟，并校验可选时间。

Enter a time independently of a calendar date.

ANATOMY & USAGE

结构与使用建议

组成部分

  • 时间输入
  • 快捷时段
  • 时区与校验

适合使用

  • 预约、营业时间、闹钟等需要表达一天内的时间。

不建议使用

  • 需要确切时刻时，应同时收集日期和时区。

键盘与无障碍

  • 输入提供名称、最小最大值与步长，错误用文字表达。
  • 说明时区，原生 time 的显示格式随浏览器地区设置变化。

参考 React Aria · TimeField ↗核对于 2026-09-05

DESCRIBE IT TO AI

这样告诉编程助手

实现时间输入框（Time Field）：独立输入小时和分钟，并校验可选时间。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="modern-demo">
      <label
        >预约时间<input
          id="time"
          type="time"
          min="09:00"
          max="18:00"
          step="900"
          value="09:30"
          aria-describedby="status"
      /></label>
      <div class="modern-actions">
        <button data-time="09:00">09:00</button><button data-time="09:15">09:15</button
        ><button data-time="09:30">09:30</button>
      </div>
      <p id="status" role="status"></p>
    </section>
    <script src="script.js" defer></script>
  </body>
</html>