[github/fretlink/time-picker.git] / README.md

# TimePicker

React TimePicker

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/rc-time-picker.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-time-picker
[travis-image]: https://img.shields.io/travis/react-component/time-picker.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/time-picker
[coveralls-image]: https://img.shields.io/coveralls/react-component/time-picker.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/time-picker?branch=master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/time-picker.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/time-picker
[node-image]: https://img.shields.io/badge/node.js-%3E=_4.0.0-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rc-time-picker.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-time-picker

example
--------

http://react-component.github.io/time-picker/

install
-------

```
npm install rc-time-picker
```

Usage
-----

```
import TimePicker from 'rc-time-picker';
import ReactDOM from 'react-dom';
ReactDOM.render(<TimePicker />, container);
```

API
---

### TimePicker

| Name                    | Type                              | Default | Description |
|-------------------------|-----------------------------------|---------|-------------|
| prefixCls               | String                            | 'rc-time-picker' | prefixCls of this component |
| clearText               | String                            | 'clear' | clear tooltip of icon |
| disabled                | Boolean                           | false   | whether picker is disabled |
| allowEmpty              | Boolean                           | true | allow clearing text |
| open                    | Boolean                           | false | current open state of picker. controlled prop |
| defaultValue            | moment                            | null | default initial value |
| defaultOpenValue        | moment                            | moment() | default open panel value, used to set utcOffset,locale if value/defaultValue absent |
| value                   | moment                            | null | current value |
| placeholder             | String                            | '' | time input's placeholder |
| className               | String                            | '' | time picker className |
| popupClassName          | String                            | '' | time panel className |
| showHour                | Boolean                           | true | whether show hour | |
| showMinute              | Boolean                           | true | whether show minute |
| showSecond              | Boolean                           | true | whether show second |
| format                  | String                            | - | moment format |
| disabledHours           | Function                          | - | disabled hour options |
| disabledMinutes         | Function                          | - | disabled minute options |
| disabledSeconds         | Function                          | - | disabled second options |
| use12Hours              | Boolean                           | false | 12 hours display mode |
| hideDisabledOptions     | Boolean                           | false | whether hide disabled options |
| onChange                | Function                          | null | called when select a different value |
| addon                   | Function                          | - | called from timepicker panel to render some addon to its bottom, like an OK button. Receives panel instance as parameter, to be able to close it like `panel.close()`.|
| placement               | String                            | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
| transitionName          | String                            | ''  |  |
| name                    | String                            | - | sets the name of the generated input |
| onOpen                  | Function({ open })                |   | when TimePicker panel is opened      |
| onClose                 | Function({ open })                |   | when TimePicker panel is opened      |
| focusOnOpen             | Boolean                           | false | automatically focus the input when the picker opens |

## Test Case

```
npm test
npm run chrome-test
```

## Coverage

```
npm run coverage
```

open coverage/ dir

License
-------

rc-time-picker is released under the MIT license.
Commit	Line	Data
e75ed0c6	1	# TimePicker
78637ac0 M	2
	3	React TimePicker
	4
e9060dda	5	[![NPM version][npm-image]][npm-url]
	6	[![build status][travis-image]][travis-url]
	7	[![Test coverage][coveralls-image]][coveralls-url]
	8	[![gemnasium deps][gemnasium-image]][gemnasium-url]
	9	[![node version][node-image]][node-url]
	10	[![npm download][download-image]][download-url]
	11
	12	[npm-image]: http://img.shields.io/npm/v/rc-time-picker.svg?style=flat-square
	13	[npm-url]: http://npmjs.org/package/rc-time-picker
	14	[travis-image]: https://img.shields.io/travis/react-component/time-picker.svg?style=flat-square
	15	[travis-url]: https://travis-ci.org/react-component/time-picker
	16	[coveralls-image]: https://img.shields.io/coveralls/react-component/time-picker.svg?style=flat-square
	17	[coveralls-url]: https://coveralls.io/r/react-component/time-picker?branch=master
	18	[gemnasium-image]: http://img.shields.io/gemnasium/react-component/time-picker.svg?style=flat-square
	19	[gemnasium-url]: https://gemnasium.com/react-component/time-picker
	20	[node-image]: https://img.shields.io/badge/node.js-%3E=_4.0.0-green.svg?style=flat-square
	21	[node-url]: http://nodejs.org/download/
	22	[download-image]: https://img.shields.io/npm/dm/rc-time-picker.svg?style=flat-square
	23	[download-url]: https://npmjs.org/package/rc-time-picker
	24
	25	example
	26	--------
	27
	28	http://react-component.github.io/time-picker/
	29
78637ac0 M	30	install
	31	-------
	32
	33	```
	34	npm install rc-time-picker
	35	```
	36
	37	Usage
	38	-----
	39
	40	```
	41	import TimePicker from 'rc-time-picker';
78637ac0 M	42	import ReactDOM from 'react-dom';
	43	ReactDOM.render(<TimePicker />, container);
	44	```
	45
	46	API
	47	---
	48
4acbf95c	49	### TimePicker
78637ac0	50
e3b09ca0	51	\| Name \| Type \| Default \| Description \|
e3b09ca0	52	\|-------------------------\|-----------------------------------\|---------\|-------------\|
63105a5e	53	\| prefixCls \| String \| 'rc-time-picker' \| prefixCls of this component \|
e3b09ca0	54	\| clearText \| String \| 'clear' \| clear tooltip of icon \|
e3b09ca0	55	\| disabled \| Boolean \| false \| whether picker is disabled \|
96d6133e	56	\| allowEmpty \| Boolean \| true \| allow clearing text \|
e3b09ca0	57	\| open \| Boolean \| false \| current open state of picker. controlled prop \|
	58	\| defaultValue \| moment \| null \| default initial value \|
	59	\| defaultOpenValue \| moment \| moment() \| default open panel value, used to set utcOffset,locale if value/defaultValue absent \|
	60	\| value \| moment \| null \| current value \|
	61	\| placeholder \| String \| '' \| time input's placeholder \|
a7c6e7bb	62	\| className \| String \| '' \| time picker className \|
a7c6e7bb	63	\| popupClassName \| String \| '' \| time panel className \|
e3b09ca0	64	\| showHour \| Boolean \| true \| whether show hour \| \|
	65	\| showMinute \| Boolean \| true \| whether show minute \|
	66	\| showSecond \| Boolean \| true \| whether show second \|
	67	\| format \| String \| - \| moment format \|
	68	\| disabledHours \| Function \| - \| disabled hour options \|
	69	\| disabledMinutes \| Function \| - \| disabled minute options \|
	70	\| disabledSeconds \| Function \| - \| disabled second options \|
63105a5e	71	\| use12Hours \| Boolean \| false \| 12 hours display mode \|
e3b09ca0	72	\| hideDisabledOptions \| Boolean \| false \| whether hide disabled options \|
e3b09ca0	73	\| onChange \| Function \| null \| called when select a different value \|
63105a5e	74	\| addon \| Function \| - \| called from timepicker panel to render some addon to its bottom, like an OK button. Receives panel instance as parameter, to be able to close it like `panel.close()`.\|
	75	\| placement \| String \| bottomLeft \| one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] \|
	76	\| transitionName \| String \| '' \| \|
aa6d9b9f	77	\| name \| String \| - \| sets the name of the generated input \|
	78	\| onOpen \| Function({ open }) \| \| when TimePicker panel is opened \|
	79	\| onClose \| Function({ open }) \| \| when TimePicker panel is opened \|
d18ecfb6	80	\| focusOnOpen \| Boolean \| false \| automatically focus the input when the picker opens \|
78637ac0	81
4984ed85	82	## Test Case
	83
	84	```
	85	npm test
	86	npm run chrome-test
	87	```
	88
	89	## Coverage
	90
	91	```
	92	npm run coverage
	93	```
	94
	95	open coverage/ dir
	96
78637ac0 M	97	License
	98	-------
	99
	100	rc-time-picker is released under the MIT license.