README.md

   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 | closeOnEsc              | Boolean                           | true  | whether <kbd>esc</kbd> should close the picker |
  86 | inputReadOnly             | Boolean                           | false | set input to read only |
  87
  88 ## Test Case
  89
  90 ```
  91 npm test
  92 npm run chrome-test
  93 ```
  94
  95 ## Coverage
  96
  97 ```
  98 npm run coverage
  99 ```
 100
 101 open coverage/ dir
 102
 103 License
 104 -------
 105
 106 rc-time-picker is released under the MIT license.