TimePicker 时间选择框

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

何时使用

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

API

时间选择框

代码示例

基本

最简单的用法。

查看源码在线预览

import { TimePicker } from "@icedesign/base";
ReactDOM.render(
  <TimePicker
    onChange={(val, str) => console.log(val, str)}
    language="en-us"
  />,
  mountNode
);

默认值

默认值。

查看源码在线预览

import { TimePicker } from "@icedesign/base";
ReactDOM.render(<TimePicker defaultValue="11:11:11" />, mountNode);

禁用时分秒

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

查看源码在线预览

import { TimePicker } from "@icedesign/base";
function disabledHours() {
  return [6, 12, 18, 23];
}
function disabledMinutes() {
  return [10, 20, 30, 40, 50];
}
function disabledSeconds() {
  return [10, 20, 30, 40, 50];
}
ReactDOM.render(
  <div>
    <h3>禁用全部</h3>
    <TimePicker disabled defaultValue="11:11:11" />
    <h3>禁用时</h3>
    <TimePicker disabledHours={disabledHours} />
    <h3>禁用分</h3>
    <TimePicker disabledMinutes={disabledMinutes} />
    <h3>禁用秒</h3>
    <TimePicker disabledSeconds={disabledSeconds} />
  </div>,
  mountNode
);

结合 Field 使用

配合Field使用

查看源码在线预览

import { TimePicker, Field } from "@icedesign/base";
class App extends React.Component {
  field = new Field(this);
  render() {
    const init = this.field.init;
    const props = init("test-time-picker", {
      rules: [{ required: true, message: "具体时间点必须要选" }],
      initValue: "00:00:00"
    });
    return <TimePicker {...props} />;
  }
}
ReactDOM.render(<App />, mountNode);

格式化时间

例如不可选择小时，或者不可选择秒可以通过 format 属性来格式化时间，可以通过该属性来禁用某一列。

查看源码在线预览

import { TimePicker } from "@icedesign/base";
ReactDOM.render(
  <div>
    <h3>不可选择秒</h3>
    <TimePicker format="HH:mm" />
    <h3>不可选择小时</h3>
    <TimePicker format="mm:ss" />
  </div>,
  mountNode
);

尺寸

其中默认尺寸为 medium。可以通过 size 属性调整组件输入框的大小，可选值包括 large, medium, small。

查看源码在线预览

import { TimePicker } from "@icedesign/base";
ReactDOM.render(
  <div>
    <h3>大号</h3>
    <TimePicker size="large" />
    <h3>中号</h3>
    <TimePicker />
    <h3>小号</h3>
    <TimePicker size="small" />
  </div>,
  mountNode
);

相关区块

暂无相关区块