TimePicker时间选择框

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

代码演示

TimePicker时间选择框 - 图1

基本

点击 TimePicker,然后可以在浮层中选择或者输入某一时间。

  1. import { TimePicker } from 'antd';
  2. import moment from 'moment';
  3. function onChange(time, timeString) {
  4. console.log(time, timeString);
  5. }
  6. ReactDOM.render(
  7. <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
  8. mountNode,
  9. );

TimePicker时间选择框 - 图2

三种大小

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

  1. import { TimePicker } from 'antd';
  2. import moment from 'moment';
  3. ReactDOM.render(
  4. <div>
  5. <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
  6. <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
  7. <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
  8. </div>,
  9. mountNode,
  10. );

TimePicker时间选择框 - 图3

选择时分

TimePicker 浮层中的列会随着 format 变化,当略去 format 中的某部分时,浮层中对应的列也会消失。

  1. import { TimePicker } from 'antd';
  2. import moment from 'moment';
  3. const format = 'HH:mm';
  4. ReactDOM.render(<TimePicker defaultValue={moment('12:08', format)} format={format} />, mountNode);

TimePicker时间选择框 - 图4

附加内容

在 TimePicker 选择框底部显示自定义的内容。

  1. import { TimePicker, Button } from 'antd';
  2. class TimePickerAddonDemo extends React.Component {
  3. state = { open: false };
  4. handleOpenChange = open => {
  5. this.setState({ open });
  6. };
  7. handleClose = () => this.setState({ open: false });
  8. render() {
  9. return (
  10. <TimePicker
  11. open={this.state.open}
  12. onOpenChange={this.handleOpenChange}
  13. renderExtraFooter={() => (
  14. <Button size="small" type="primary" onClick={this.handleClose}>
  15. Ok
  16. </Button>
  17. )}
  18. />
  19. );
  20. }
  21. }
  22. ReactDOM.render(<TimePickerAddonDemo />, mountNode);

TimePicker时间选择框 - 图5

范围选择器

通过 RangePicker 使用时间范围选择器。

  1. import { TimePicker } from 'antd';
  2. const { RangePicker } = TimePicker;
  3. ReactDOM.render(
  4. <div>
  5. <RangePicker />
  6. </div>,
  7. mountNode,
  8. );

TimePicker时间选择框 - 图6

受控组件

value 和 onChange 需要配合使用。

  1. import { TimePicker } from 'antd';
  2. class Demo extends React.Component {
  3. state = {
  4. value: null,
  5. };
  6. onChange = time => {
  7. console.log(time);
  8. this.setState({ value: time });
  9. };
  10. render() {
  11. return <TimePicker value={this.state.value} onChange={this.onChange} />;
  12. }
  13. }
  14. ReactDOM.render(<Demo />, mountNode);

TimePicker时间选择框 - 图7

禁用

禁用时间选择。

  1. import { TimePicker } from 'antd';
  2. import moment from 'moment';
  3. ReactDOM.render(<TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />, mountNode);

TimePicker时间选择框 - 图8

步长选项

可以使用 hourStep minuteStep secondStep 按步长展示可选的时分秒。

  1. import { TimePicker } from 'antd';
  2. ReactDOM.render(<TimePicker minuteStep={15} secondStep={10} />, mountNode);

TimePicker时间选择框 - 图9

12 小时制

12 小时制的时间选择器,默认的 format 为 h:mm:ss a

  1. import { TimePicker } from 'antd';
  2. function onChange(time, timeString) {
  3. console.log(time, timeString);
  4. }
  5. ReactDOM.render(
  6. <div>
  7. <TimePicker use12Hours onChange={onChange} />
  8. <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} style={{ width: 140 }} />
  9. <TimePicker use12Hours format="h:mm a" onChange={onChange} />
  10. </div>,
  11. mountNode,
  12. );

API


  1. import moment from 'moment';
  2. <TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
参数说明类型默认值版本
allowClear是否展示清除按钮booleantrue
autoFocus自动获取焦点booleanfalse
bordered是否有booleantrue
className选择器类名string''
clearText清除按钮的提示文案stringclear
defaultValue默认时间moment
disabled禁用全部操作booleanfalse
disabledHours禁止选择部分小时选项function()
disabledMinutes禁止选择部分分钟选项function(selectedHour)
disabledSeconds禁止选择部分秒选项function(selectedHour, selectedMinute)
format展示的时间格式string"HH:mm:ss"
getPopupContainer定义浮层的容器,默认为 body 上新建 divfunction(trigger)
hideDisabledOptions隐藏禁止选择的选项booleanfalse
hourStep小时选项间隔number1
inputReadOnly设置输入框为只读(避免在移动设备上打开虚拟键盘)booleanfalse
minuteStep分钟选项间隔number1
open面板是否打开booleanfalse
placeholder没有值的时候显示的内容string"请选择时间"
popupClassName弹出层类名string''
popupStyle弹出层样式对象object-
secondStep秒选项间隔number1
suffixIcon自定义的选择框后缀图标ReactNode-
clearIcon自定义的清除图标ReactNode-
renderExtraFooter选择框底部显示自定义的内容() => ReactNode
use12Hours使用 12 小时制,为 true 时 format 默认为 h:mm:ss abooleanfalse
value当前时间moment
onChange时间发生变化的回调function(time: moment, timeString: string): void
onOpenChange面板打开/关闭时的回调(open: boolean): void

方法

名称描述版本
blur()移除焦点
focus()获取焦点

RangePicker

属性与 DatePicker 的 RangePicker 相同。还包含以下属性:

参数说明类型默认值版本
order始末时间是否自动排序booleantrue4.1.0

FAQ