• TimePicker 时间选择框

    输入或选择时间的控件。

    何时使用


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

    代码演示

    点击 TimePicker,然后可以在浮层中选择或者输入某一时间。
    expand code expand code
    import { TimePicker } from 'choerodon-ui';
    import moment from 'moment';
    
    function onChange(time, timeString) {
      console.log(time, timeString);
    }
    
    ReactDOM.render(
      <TimePicker
        label="时间选择框"
        onChange={onChange}
        defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
      />,
      mountNode
    );
    
    三种大小的输入框,大的用在表单中,中的为默认。
    expand code expand code
    import { TimePicker } from 'choerodon-ui';
    import moment from 'moment';
    
    ReactDOM.render(
      <div>
        <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
        <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
        <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
      </div>,
      mountNode);
    
    TimePicker 浮层中的列会随着 format 变化,当略去 format 中的某部分时,浮层中对应的列也会消失。
    expand code expand code
    import { TimePicker } from 'choerodon-ui';
    import moment from 'moment';
    
    const format = 'HH:mm';
    
    ReactDOM.render(
      <TimePicker defaultValue={moment('12:08', format)} format={format} />,
      mountNode);
    
    在 TimePicker 选择框底部显示自定义的内容。
    expand code expand code
    import { TimePicker, Button } from 'choerodon-ui';
    
    class TimePickerAddonDemo extends React.Component {
      state = { open: false };
    
      handleOpenChange = (open) => {
        this.setState({ open });
      }
    
      handleClose = () => this.setState({ open: false })
    
      render() {
        return (
          <TimePicker
            open={this.state.open}
            onOpenChange={this.handleOpenChange}
            addon={() => (
              <Button size="small" type="primary" onClick={this.handleClose}>
                Ok
              </Button>
            )}
          />
        );
      }
    }
    
    ReactDOM.render(<TimePickerAddonDemo />, mountNode);
    
    value 和 onChange 需要配合使用。
    expand code expand code
    import { TimePicker } from 'choerodon-ui';
    
    class Demo extends React.Component {
      state = {
        value: null,
      };
    
      onChange = (time) => {
        console.log(time);
        this.setState({ value: time });
      }
    
      render() {
        return <TimePicker value={this.state.value} onChange={this.onChange} />;
      }
    }
    
    ReactDOM.render(<Demo />, mountNode);
    
    禁用时间选择。
    expand code expand code
    import { TimePicker } from 'choerodon-ui';
    import moment from 'moment';
    
    ReactDOM.render(
      <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />,
      mountNode);
    
    可以使用 hourStep minuteStep secondStep 按步长展示可选的时分秒。
    expand code expand code
    import { TimePicker } from 'choerodon-ui';
    
    ReactDOM.render(
      <TimePicker minuteStep={15} secondStep={10} />,
      mountNode);
    
    12 小时制的时间选择器,默认的 format 为 h:mm:ss a
    expand code expand code
    import { TimePicker } from 'choerodon-ui';
    
    function onChange(time, timeString) {
      console.log(time, timeString);
    }
    
    ReactDOM.render(
      <div>
        <TimePicker use12Hours onChange={onChange} />
        <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} />
        <TimePicker use12Hours format="h:mm a" onChange={onChange} />
      </div>,
      mountNode);
    

    API


    import moment from 'moment';
    <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()获取焦点