Timepicker 时间选择框

输入或选择时间的控件。

何时使用#

当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。

API#

<Timepicker defaultValue="13:30:56" />

参数	说明	类型	默认值
defaultValue	默认时间	string	无
placeholder	没有值的时候显示的内容	string	"请选择时间"
onChange	时间发生变化的回调	function(Date value)	无
format	展示的时间格式	string	"HH:mm:ss"、"HH:mm"、"mm:ss"
disabled	禁用	bool	false
hourOptions	特定可选择的小时	array	0 到 24 组成的数组
minuteOptions	特定可选择的分钟	array	0 到 60 组成的数组
secondOptions	特定可选择的秒	array	0 到 60 组成的数组

代码演示

import { Timepicker } from 'antd';

function onChange(time) {
  if (time) {
    console.log(time.toLocaleTimeString('zh-CN', {
      hour12: false
    }));
  }
}

ReactDOM.render(
  <Timepicker defaultValue="12:08:23" onChange={onChange} />
, document.getElementById('components-timepicker-demo-basic'));

基本

最简单的用法。

import { Timepicker } from 'antd';

ReactDOM.render(
  <Timepicker defaultValue="12:30:23" format="HH:mm" minuteOptions={[0, 30]} />
, document.getElementById('components-timepicker-demo-special-minutes'));

特定选项

分钟只提供特定的选择，同时可以通过 hourOptions 和 secondOptions 对小时和秒进行特殊的限定。

import { Timepicker } from 'antd';

ReactDOM.render(
  <Timepicker placeholder="Select sth." />
, document.getElementById('components-timepicker-demo-no-default-value'));

无默认值

没有默认时间。

import { Timepicker } from 'antd';

ReactDOM.render(
  <Timepicker defaultValue="12:08:23" format="HH:mm" />
, document.getElementById('components-timepicker-demo-without-seconds'));

不展示秒

不展示秒，也不允许选择。

import { Timepicker } from 'antd';

ReactDOM.render(
  <Timepicker defaultValue="12:08:23" disabled />
, document.getElementById('components-timepicker-demo-disabled'));

禁用

禁用时间选择。

import { Timepicker } from 'antd';

ReactDOM.render(
  <div>
    <Timepicker defaultValue="12:08:23" size="large" />
    <Timepicker defaultValue="12:08:23" />
    <Timepicker defaultValue="12:08:23" size="small" />
  </div>
, document.getElementById('components-timepicker-demo-size'));

三种大小

三种大小的输入框，大的用在表单中，中的为默认。