TimePicker 时间选择框

输入或选择时间的控件。

何时使用


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

代码演示

基本

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

TimePicker时间选择框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { TimePicker } from 'choerodon-ui';
  4. import moment from 'moment';
  5. function onChange(time, timeString) {
  6. console.log(time, timeString);
  7. }
  8. ReactDOM.render(
  9. <TimePicker
  10. label="时间选择框"
  11. onChange={onChange}
  12. defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
  13. />,
  14. document.getElementById('container'),
  15. );

受控组件

value 和 onChange 需要配合使用。

TimePicker时间选择框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { TimePicker } from 'choerodon-ui';
  4. class Demo extends React.Component {
  5. state = {
  6. value: null,
  7. };
  8. onChange = (time) => {
  9. console.log(time);
  10. this.setState({ value: time });
  11. }
  12. render() {
  13. return <TimePicker value={this.state.value} onChange={this.onChange} />;
  14. }
  15. }
  16. ReactDOM.render(<Demo />, document.getElementById('container'));

三种大小

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

TimePicker时间选择框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { TimePicker } from 'choerodon-ui';
  4. import moment from 'moment';
  5. ReactDOM.render(
  6. <div>
  7. <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
  8. <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
  9. <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
  10. </div>,
  11. document.getElementById('container'));

禁用

禁用时间选择。

TimePicker时间选择框 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { TimePicker } from 'choerodon-ui';
  4. import moment from 'moment';
  5. ReactDOM.render(
  6. <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />,
  7. document.getElementById('container'));

选择时分

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

TimePicker时间选择框 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { TimePicker } from 'choerodon-ui';
  4. import moment from 'moment';
  5. const format = 'HH:mm';
  6. ReactDOM.render(
  7. <TimePicker defaultValue={moment('12:08', format)} format={format} />,
  8. document.getElementById('container'));

步长选项

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

TimePicker时间选择框 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { TimePicker } from 'choerodon-ui';
  4. ReactDOM.render(
  5. <TimePicker minuteStep={15} secondStep={10} />,
  6. document.getElementById('container'));

附加内容

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

TimePicker时间选择框 - 图7

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

12 小时制

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

TimePicker时间选择框 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { TimePicker } from 'choerodon-ui';
  4. function onChange(time, timeString) {
  5. console.log(time, timeString);
  6. }
  7. ReactDOM.render(
  8. <div>
  9. <TimePicker use12Hours onChange={onChange} />
  10. <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} />
  11. <TimePicker use12Hours format="h:mm a" onChange={onChange} />
  12. </div>,
  13. document.getElementById('container'));

API


  1. import moment from 'moment';
  2. <TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />
参数说明类型默认值
addon选择框底部显示自定义的内容function
allowEmpty是否展示清除按钮booleantrue
autoFocus自动获取焦点booleanfalse
className选择器类名string‘’
clearText清除按钮的提示文案stringclear
defaultOpenValue当 defaultValue/value 不存在时,可以设置面板打开时默认选中的值momentmoment()
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‘’
secondStep秒选项间隔number1
use12Hours使用 12 小时制,为 true 时 format 默认为 h:mm:ss abooleanfalse
value当前时间moment
onChange时间发生变化的回调function(time: moment, timeString: string): void
onOpenChange面板打开/关闭时的回调(open: boolean): void

方法

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