0.0.3 • Published 8 years ago
react-gradient-timepicker v0.0.3
react-gradient-timepicker
A beautiful gradients timepicker component built in and for awesome React.
Demo
https://github.com/rahuldhawani/react-timepicker
Installation
npm install react-gradient-timepicker --saveHow to use?
import TimePicker from 'react-gradient-timepicker'; // or
var TimePicker = require('react-gradient-timepicker');<TimePicker
time="01:00"
theme="Bourbon"
className="timepicker"
placeholder="Start Time"
onSet={(val) => {
alert('val:' + val.format12);
}}
/>PropTypes
| prop | type | description | optional |
|---|---|---|---|
| #time | string | 24 hours format time to initial time | Yes. Takes current time if not provided |
| theme | string | Gradient name from uigradients.com. header, buttons, hand colors will take theme color. If you want to change buttons and hand color, provide color1 prop. Note: Header color cant be changed if theme is provided | Yes. If not provided it takes color1. if color1 is not provided it takes default color ie #F26B83. |
| color1 | string | color1 is primary color ie. header, buttons, hand will take this color. If you want to header color, provide headerColor prop | Yes. Takes default color for header, buttons, hand ie. #F26B83 |
| headerColor | string | Header color for timepicker. Does not work if theme prop is provided. | Yes. If not provided it takes color1. if color1 is not provided it takes default color ie #F26B83. |
| placeholder | string | Placeholder string for timepicker input | No |
| className | string | Class name for timepicker input | Yes |
| onSet | function | The funciton to call when Set button is clicked | No |
onSet PropType
onSet function is called everytime SET button is clicked with parameter
{
format12: '01:00 AM' // 12 hour format,
format24: '13:00' // 24 hour format
}Screenshots
