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:3023:30 这个时间段。