react-gradient-timepicker

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 --save

How 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