[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 |
| id                      | String                            | '' | time picker id |
| 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      |
| hourStep                | Number                            | 1 | interval between hours in picker  |
| minuteStep              | Number                            | 1 | interval between minutes in picker  |
| secondStep              | Number                            | 1 | interval between seconds in picker  |
| focusOnOpen             | Boolean                           | false | automatically focus the input when the picker opens |
| inputReadOnly             | Boolean                           | false | set input to read only |

## 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
	1	# TimePicker
	2
	3	React TimePicker
	4
	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
	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';
	42	import ReactDOM from 'react-dom';
	43	ReactDOM.render(<TimePicker />, container);
	44	```
	45
	46	API
	47	---
	48
	49	### TimePicker
	50
	51	\| Name \| Type \| Default \| Description \|
	52	\|-------------------------\|-----------------------------------\|---------\|-------------\|
	53	\| prefixCls \| String \| 'rc-time-picker' \| prefixCls of this component \|
	54	\| clearText \| String \| 'clear' \| clear tooltip of icon \|
	55	\| disabled \| Boolean \| false \| whether picker is disabled \|
	56	\| allowEmpty \| Boolean \| true \| allow clearing text \|
	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 \|
	62	\| className \| String \| '' \| time picker className \|
	63	\| id \| String \| '' \| time picker id \|
	64	\| popupClassName \| String \| '' \| time panel className \|
	65	\| showHour \| Boolean \| true \| whether show hour \| \|
	66	\| showMinute \| Boolean \| true \| whether show minute \|
	67	\| showSecond \| Boolean \| true \| whether show second \|
	68	\| format \| String \| - \| moment format \|
	69	\| disabledHours \| Function \| - \| disabled hour options \|
	70	\| disabledMinutes \| Function \| - \| disabled minute options \|
	71	\| disabledSeconds \| Function \| - \| disabled second options \|
	72	\| use12Hours \| Boolean \| false \| 12 hours display mode \|
	73	\| hideDisabledOptions \| Boolean \| false \| whether hide disabled options \|
	74	\| onChange \| Function \| null \| called when select a different value \|
	75	\| 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()`.\|
	76	\| placement \| String \| bottomLeft \| one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] \|
	77	\| transitionName \| String \| '' \| \|
	78	\| name \| String \| - \| sets the name of the generated input \|
	79	\| onOpen \| Function({ open }) \| \| when TimePicker panel is opened \|
	80	\| onClose \| Function({ open }) \| \| when TimePicker panel is opened \|
	81	\| hourStep \| Number \| 1 \| interval between hours in picker \|
	82	\| minuteStep \| Number \| 1 \| interval between minutes in picker \|
	83	\| secondStep \| Number \| 1 \| interval between seconds in picker \|
	84	\| focusOnOpen \| Boolean \| false \| automatically focus the input when the picker opens \|
	85	\| inputReadOnly \| Boolean \| false \| set input to read only \|
	86
	87	## Test Case
	88
	89	```
	90	npm test
	91	npm run chrome-test
	92	```
	93
	94	## Coverage
	95
	96	```
	97	npm run coverage
	98	```
	99
	100	open coverage/ dir
	101
	102	License
	103	-------
	104
	105	rc-time-picker is released under the MIT license.