简体中文

时间选择器

一个用于选择时间的组件。

此组件除了鼠标之外,也可以使用键盘控制。 你可以使用EnterEscape ,以及通过ShiftAlt的组合键来控制她们, 其示例如下:

按键 功能
Enter 确认
Escape 取消
←/→ 上一秒/下一秒
↑/↓ 上一秒/下一秒
Shift + ←/→ 上一分钟/下一分钟
Shift + ↑/↓ 上一分钟/下一分钟
Alt + Shift + ←/→ 上一小时/下一小时
Alt + Shift + ↑/↓ 上一小时/下一小时
基础
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 17/1/23
 */
import React, {Component} from 'react';
import {TimePicker, Button} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Base
 *
 * You can set the time with `time` property,
 * if she is not provided, don't worry, this component will be controlled by itself,
 * otherwise, you must provide the `time` property and use callbacks to manage her by yourself.
 *
 * The `time` could be `Date` object or an [legal `dateString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse),
 * if she is an invalid value, hana will reset her to `null`.
 *
 * After selecting a time successful, callback `onChange` will be called,
 * she has two parameters, the first is `time`, the second is a string formatted from `time`.
 *
 * Property `show` is used for controlling this component more flexible.
 * Use `show`, you could open or close the dialog by yourself.
 *
 * Except for the default formatting method, hana also provides a property `format`,
 * she is a function used for formatting the time to string.
 *
 * Property `withClear` is used for clearing time.
 *
 * @cn
 * 基础
 *
 * 想要设置时间,请使用`time`属性,但如果你没有提供此属性呢,不要担心,该组件将会工作在自动模式,
 * 但一旦提供了该属性,就必须确保自己对她的控制。
 *
 * 时间接受两种类型的值,一种是js的`Date`对象,一个则是[符合标准的`dateString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse),
 * 如果传进的是无效值,hana呢,会将其重置为`null`。
 *
 * 当时间选择结束后,回调函数`onChange`将会被调用,她有两个参数,
 * 第一个参数传递`time`的变化,第二个参数则传递日期格式化后的字符串。
 *
 * 属性`show`使得组件的使用更加灵活。
 * `show`属性提供了一个接口,可以直接让你自行控制时间选择框的打开或关闭。
 *
 * 而除了默认的格式化之外,hana提供了一个`format`函数,她接受一个`time`,返回一个格式化后的字符串。
 *
 * `withClear`属性用于清空已选择的时间。
 */
export default class ExampleBase extends Component {
  state = {
    autoTime: null,
    autoText: '',
    controlledTime: new Date(),
    show: false,
    timeString: ''
  };

  render() {
    const {
      autoTime,
      autoText,
      controlledTime,
      show,
      timeString
    } = this.state;

    return (
      <div>
        <ExampleBlock
          en={(
            <p>Auto mode, time is `{autoTime === null ? 'null' : autoTime.toString()}`, text is `{autoText}`</p>
          )}
          cn={(
            <p>自动模式,date为`{autoTime === null ? 'null' : autoTime.toString()}`,text为`{autoText}`</p>
          )}
        >
          <TimePicker
            onChange={(time, text) =>
              this.setState({
                autoTime: time,
                autoText: text
              })
            }
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Controlled mode, time will be increased automatically after selection.</p>
          )}
          cn={(
            <p>控制模式,date将会在选择后自增1天。</p>
          )}
        >
          <TimePicker
            time={controlledTime}
            onChange={time => {
              controlledTime.setDate(controlledTime.getDate() + 1);
              this.setState({controlledTime: time});
            }}
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Using string as time value</p>
          )}
          cn={(
            <p>使用字符串作为`time`的值</p>
          )}
        >
          <TimePicker
            time={timeString}
            onChange={(time, text) => {
              this.setState({timeString: text});
            }}
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Using `show`</p>
          )}
          cn={(
            <p>使用`show`属性</p>
          )}
        >
          <div className="flex">
            <Button
              style={{
                marginRight: 12
              }}
              onClick={() => this.setState({show: !show})}
            >
              {this.state.show ? 'Close' : 'Show'}
            </Button>
            <div>
              <TimePicker
                show={show}
              />
            </div>
          </div>
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Format: %S / %M - %H</p>
          )}
          cn={(
            <p>格式化: %S / %M - %H</p>
          )}
        >
          <TimePicker
            format={time => {
              const hour = time.getHours();
              const minute = time.getMinutes();
              const second = time.getSeconds();
              return `${second < 10 ? '0' : ''}${second} \/ ${minute < 10 ? '0' : ''}${minute} \/ ${hour < 10 ? '0' : ''}${hour}`; // eslint-disable-line
            }}
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Clear</p>
          )}
          cn={(
            <p>清空</p>
          )}
        >
          <TimePicker withClear />
        </ExampleBlock>
      </div>
    );
  }
}

想要设置时间,请使用time属性,但如果你没有提供此属性呢,不要担心,该组件将会工作在自动模式, 但一旦提供了该属性,就必须确保自己对她的控制。

时间接受两种类型的值,一种是js的Date对象,一个则是符合标准的dateString, 如果传进的是无效值,hana呢,会将其重置为null

当时间选择结束后,回调函数onChange将会被调用,她有两个参数, 第一个参数传递time的变化,第二个参数则传递日期格式化后的字符串。

属性show使得组件的使用更加灵活。 show属性提供了一个接口,可以直接让你自行控制时间选择框的打开或关闭。

而除了默认的格式化之外,hana提供了一个format函数,她接受一个time,返回一个格式化后的字符串。

withClear属性用于清空已选择的时间。

自动模式,date为`null`,text为``

控制模式,date将会在选择后自增1天。

使用字符串作为`time`的值

使用`show`属性

格式化: %S / %M - %H

清空

多语言
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/3/3
 */
import React from 'react';
import {TimePicker} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Multi-Languages
 *
 * Hana provides property `lang` to support many languages,
 * 'en', 'cn' and 'jp' are currently supported.
 *
 * @cn
 * 多语言
 *
 * hana提供了`lang`属性用于配置组件的语言,现在支持英文`en`、中文`cn`和日文`jp`。
 *
 */
export default () => (
  <div>
    <ExampleBlock
      en={(
        <p>English, lang = 'en'</p>
      )}
      cn={(
        <p>英文,lang = 'en'</p>
      )}
    >
      <TimePicker
        lang={'en'}
      />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Chinese, lang = 'cn'</p>
      )}
      cn={(
        <p>中文,lang = 'cn'</p>
      )}
    >
      <TimePicker
        lang={'cn'}
      />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Japanese, lang = 'jp'</p>
      )}
      cn={(
        <p>日文,lang = 'jp'</p>
      )}
    >
      <TimePicker
        lang={'jp'}
      />
    </ExampleBlock>
  </div>
);

hana提供了lang属性用于配置组件的语言,现在支持英文en、中文cn和日文jp

英文,lang = 'en'

中文,lang = 'cn'

日文,lang = 'jp'

显示类型
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/3/3
 */
import React from 'react';
import {TimePicker, Button} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 *@en
 * View types.
 *
 * Set the component will be placed on page.
 *
 * Three view modes are supported,
 * If children is provided, hana will use it as the view component,
 * otherwise, `view` property will decide the default one.
 * `view` could only be `text` now which will place a Text component,
 * and the `click` event will be used as a trigger to open the dialog.
 *
 * @cn
 * 显示类型
 *
 * 设置被时间选择框凭依的组件。
 *
 * 当`children`被提供之时,hana将会用其作为凭依的组件,否则将会根据`view`属性来选择默认的凭依。
 * `view`目前只支持`text`类型,这会提供一个`Text`组件,选择框将会在其被点击时打开。
 */
export default () => (
  <div>
    <ExampleBlock
      en={(
        <p>`text` mode</p>
      )}
      cn={(
        <p>`test`模式</p>
      )}
    >
      <TimePicker />
    </ExampleBlock>
    <ExampleBlock
      en={(
        <p>`custom` mode</p>
      )}
      cn={(
        <p>`custom`模式</p>
      )}
    >
      <TimePicker>
        <Button>
          Show/Close
        </Button>
      </TimePicker>
    </ExampleBlock>
  </div>
);

设置被时间选择框凭依的组件。

children被提供之时,hana将会用其作为凭依的组件,否则将会根据view属性来选择默认的凭依。 view目前只支持text类型,这会提供一个Text组件,选择框将会在其被点击时打开。

`test`模式

`custom`模式

命名
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/3/3
 */
import React from 'react';
import {TimePicker} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Names
 *
 * This world is colorful, so sometimes you may want to use your favorite names to define something.
 * hana allows you to do this, you could use the `actionNames` properties.
 *
 * @cn
 * 命名
 *
 * 这是一个多彩的世界,所以在某些时候,你一定会想按照自己的喜好来对事物命名。
 * 这里,hana提供了一种方法来使得你可以对`操作名`命名,你只需要将对应的参数传入即可:
 * `actionNames`
 *
 */
export default () => (
  <div>
    <ExampleBlock>
      <TimePicker
        actionNames={{
          ok: '种下种子',
          cancel: '我再想想'
        }}
      />
    </ExampleBlock>
  </div>
);

这是一个多彩的世界,所以在某些时候,你一定会想按照自己的喜好来对事物命名。 这里,hana提供了一种方法来使得你可以对操作名命名,你只需要将对应的参数传入即可: actionNames

属性说明

属性名 类型 默认值 说明
time dateOrStringOrNull 时间值,如果未提供,此组件将会运行在自动模式。
onChange function nop 时间被选中时将会被调用的回调函数。
(time: Time, text: string) => void
onCancel function nop 选择框被关闭时将会被调用的回调函数。
() => void
lang enum:
 'en'
 'cn'
 'jp'
'en' 期望使用的语言。
view enum:
 'text'
'text' 放置在DOM上显示元素的类型。
viewProps object {} viewtext模式时,此属性将会作为props被传递给Text组件。
show bool 直接控制选择框是否显示。
withClear bool 是否要添加清空功能。
format function time => timeToString(time) 一个用于格式化时间到字符串的自定义方法,将会影响到所有和该组件输出text相关的属性。
(time: Time) => string
className string 根组件的class。
dialogClassName string 选择框的class。
style object {} 根组件的样式。
dialogStyle object {} 选择框的样式。
actionNames shape 用户自定义的选择框操作按钮的名称。
children node null 默认放置在页面上的组件,用于替换view定义的组件。

未在文档中说明的属性将会被自动加到根元素或form元素上。