TimePicker 时间选择框

输入或选择时间的控件。

何时使用#

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

API#

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

注意：0.11+ 后 Timepicker 改名为 TimePicker。

参数	说明	类型	默认值
defaultValue	初始默认时间	string or Date	无
value	默认时间	string or Date	无
placeholder	没有值的时候显示的内容	string	"请选择时间"
onChange	时间发生变化的回调	function(Date value)	无
format	展示的时间格式	string	"HH:mm:ss"、"HH:mm"、"mm:ss"
disabled	禁用全部操作	bool	false
disabledHours	禁止选择部分小时选项	function()	无
disabledMinutes	禁止选择部分分钟选项	function(selectedHour)	无
disabledSeconds	禁止选择部分秒选项	function(selectedHour, selectedMinute)	无
hideDisabledOptions	隐藏禁止选择的选项	boolean	false
locale	国际化配置	Object	默认配置

代码演示

import { TimePicker } from 'antd';

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

ReactDOM.render(
  <TimePicker onChange={onChange} />
, mountNode);

基本

最简单的用法。

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>
, mountNode);

三种大小

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

import { TimePicker } from 'antd';

ReactDOM.render(
  <TimePicker defaultValue="12:08:23" disabled />
, mountNode);

禁用

禁用时间选择。

import { TimePicker } from 'antd';

function newArray(start, end) {
  let result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function disabledMinutes() {
  return newArray(0, 60).filter(value => value % 10 !== 0);
}

function disabledSeconds() {
  return newArray(0, 60).filter(value => value % 30 !== 0);
}

ReactDOM.render(
  <TimePicker disabledMinutes={disabledMinutes} disabledSeconds={disabledSeconds} hideDisabledOptions />
, mountNode);

只显示部分选项

通过 hideDisabledOptions 将不可选的选项隐藏。

import { TimePicker } from 'antd';

const Test = React.createClass({
  getInitialState() {
    return {
      value: null,
    };
  },
  onChange(time) {
    console.log(time);
    this.setState({ value: time });
  },
  render() {
    return <TimePicker value={this.state.value} onChange={this.onChange} />;
  }
});

ReactDOM.render(<Test />, mountNode);

受控组件

value 和 onChange 需要配合使用。

import { TimePicker } from 'antd';

ReactDOM.render(
  <TimePicker defaultValue="12:08:23" format="HH:mm" />
, mountNode);

不展示秒

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

import { TimePicker } from 'antd';

function newArray(start, end) {
  let result = [];
  for (let i = start; i < end; i++) {
    result.push(i);
  }
  return result;
}

function disabledHours() {
  let hours = newArray(0, 60);
  hours.splice(20, 4);
  return hours;
}

function disabledMinutes(h) {
  if (h === 20) {
    return newArray(0, 31);
  } else if (h === 23) {
    return newArray(30, 60);
  }
  return [];
}

ReactDOM.render(
  <TimePicker disabledHours={disabledHours} disabledMinutes={disabledMinutes} />
, mountNode);

禁止选项

限制选择 20:30 到 23:30 这个时间段。