一个用于选择时间的组件。
此组件除了鼠标之外,也可以使用键盘控制。
你可以使用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元素上。