Skip to main content

TimePicker

用于选择指定时间的选择器。

基本用法​

function App() {
  const [value, setValue] = useState('12:34:56')

  const handleChange = (val) => {
    console.log(val)
    setValue(val)
  }

  return (
    <>
      <h4>无默认值</h4>
      <TimePicker />
      <h4>有默认值</h4>
      <TimePicker defaultValue={value} />
      <h4>有固定值</h4>
      <TimePicker value={value} />
      <h4>通用方法</h4>
      <TimePicker
        value={value}
        onChange={handleChange}
      />
    </>
  )
}

独立时间面板​

可通过 TimePicker.Panel 使用单独的时间面板。

function App() {
  return (
    <TimePicker.Panel />
  )
}

不同时间类型​

可通过 format 属性指定不同的时间类型，默认为 HH:mm:ss，点击查看各类型详情。

function App() {
  const [value, setValue] = useState('12:34:56')

  const handleChange = (val) => {
    console.log(val)
    setValue(val)
  }

  return (
    <>
      <h4>24小时制 - 时分秒选择器</h4>
      <TimePicker format="HH:mm:ss" value={value} onChange={handleChange} />
      <h4>24小时制 - 时分选择器</h4>
      <TimePicker format="HH:mm" value={value} onChange={handleChange} />
      <h4>12小时制 - 时分秒选择器</h4>
      <TimePicker format="hh:mm:ss A" value={value} onChange={handleChange} />
      <h4>12小时制 - 时分选择器</h4>
      <TimePicker format="hh:mm" value={value} onChange={handleChange} />
      <h4>分秒选择器</h4>
      <TimePicker format="mm:ss" value={value} onChange={handleChange} />
    </>
  )
}

自定义步长​

可通过 steps 属性指定时间面板选择步长，默认为 [1, 1, 1]。

function App() {
  return (
    <>
      <h4>默认步长</h4>
      <TimePicker steps={[1, 1, 1]} />
      <h4>分秒步长设为 5</h4>
      <TimePicker steps={[1, 5, 5]} />
    </>
  )
}

API​

属性说明类型默认值
value时间值string--
defaultValue默认时间值string当前时间
steps时间间隔步数number[][1, 1, 1]
format格式化时间stringHH:mm:ss
onChange值变化时触发Func--