TimePicker 时间选择框

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

Guide

何时使用

当用户需要输入一个时间，可以点击输入框，在弹出的时间选择面板上操作。时间选择面板仅支持 24 小时制。format 支持的时间格式如下：

组件默认使用 moment 实例作为输入输出值，推荐使用结合 moment 的方式使用组件。此外，组件也支持传入时间字符串的方式，例如直接传入 "12:00:00"。用户传入什么类型的 value/defaultValue 值，就会在 onChange 中返回相应的类型。

API

TimePicker

ARIA and KeyBoard

代码示例

基本

最简单的用法。

查看源码在线预览

import { TimePicker } from '@alifd/next';
ReactDOM.render(<TimePicker onChange={(val) => console.log(val)} />, mountNode);

默认值

可以通过 defaultValue 传入默认时间值，并且可以通过选择改变该值。onChange 回调参数的值的类型取决于 defaultValue 的类型。

查看源码在线预览

import { TimePicker } from '@alifd/next';
import moment from 'moment';
const defaultVal = moment('12:00:00', 'HH:mm:ss', true);
ReactDOM.render(<div>
    <TimePicker defaultValue={defaultVal} onChange={(val) => console.log(val)} /><br /><br />
    <TimePicker defaultValue="12:00:00" onChange={(val) => console.log(val)} />
</div>, mountNode);

尺寸

TimePicker 使用和 Input 组件相同的输入框尺寸，可以通过 size 属性进行设置。

查看源码在线预览

import { TimePicker } from '@alifd/next';
ReactDOM.render(<div>
    <TimePicker size="large" />&nbsp;&nbsp;
    <TimePicker />&nbsp;&nbsp;
    <TimePicker size="small" />
</div>, mountNode);

受控

通过 value 和 onChange 实现受控，仅支持通过选择实现受控。

查看源码在线预览

import { TimePicker } from '@alifd/next';
import moment from 'moment';
class ControlledTimePicker extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            value: moment('12:00:00', 'HH:mm:ss', true)
        };
    }
    onSelect = (value) => {
        this.setState({ value });
        this.props.onChange(value);
    }
    render() {
        return <TimePicker value={this.state.value} onChange={this.onSelect} />;
    }
}
ReactDOM.render(<ControlledTimePicker onChange={(val) => console.log(val.format('HH:mm:ss'))} />, mountNode);

禁用时分秒

禁用全部和禁用部分选择项

查看源码在线预览

import { TimePicker } from '@alifd/next';
const disabledHours = [1, 2, 3, 4, 5];
const disabledMinutes = [10, 20, 30, 40, 50];
const disabledSeconds = [10, 20, 30, 40, 50];
const disabledItems = (list) => (index) => {
    return list.indexOf(index) >= 0;
};
ReactDOM.render(<div>
    <p>Disable TimePicker</p>
    <TimePicker disabled />
    <p>Disable Hours/Minutes/Seconds</p>
    <TimePicker disabledHours={disabledItems(disabledHours)} disabledMinutes={disabledItems(disabledMinutes)} disabledSeconds={disabledItems(disabledSeconds)} />
</div>, mountNode);

时间格式

可以通过 format 属性格式化时间值，此外该属性还会影响到时间列的展示。

查看源码在线预览

import { TimePicker } from '@alifd/next';
ReactDOM.render(<div>
    <p>Hide seconds</p>
    <TimePicker format="HH:mm" />
    <p>Hide hours</p>
    <TimePicker format="mm:ss" />
</div>, mountNode);

步长

可以通过 hourStep, minuteStep, secondStep 分别设置时分秒的选项间隔。

查看源码在线预览

import { TimePicker } from '@alifd/next';
ReactDOM.render(<TimePicker onChange={(val) => console.log(val.format('HH:mm:ss'))} hourStep={2} minuteStep={5} secondStep={5} />, mountNode);

结合 Field 使用

配合 Field 使用

查看源码在线预览

import { TimePicker, Field, Button } from '@alifd/next';
import moment from 'moment';
class Demo extends React.Component {
    field = new Field(this);
    onClick = () => {
        const value = this.field.getValue('time-picker');
        console.log(value.format('HH:mm:ss'));
    }
    render() {
        const { init } = this.field;
        const props = init('time-picker', {
            rules: [
                { required: true, message: 'Time Required' }
            ],
            initValue: moment('00:00:00', 'HH:mm:ss', true)
        });
        return (<div>
            <TimePicker {...props} /> <br /><br />
            <Button onClick={this.onClick}>Print Value in Console</Button>
        </div>);
    }
}
ReactDOM.render(<Demo />, mountNode);

相关区块

暂无相关区块