时间选择器

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

此组件除了鼠标之外，也可以使用键盘控制。你可以使用Enter、Escape ，以及通过←、→、↑、↓与Shift和Alt的组合键来控制她们，其示例如下：

按键	功能
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	{}	当`view`为`text`模式时，此属性将会作为`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元素上。