react-toolbox/components/time_picker
Keren Chandran cdd6ee5f05 Merge branch 'dev' of https://github.com/react-toolbox/react-toolbox into update-docs
# Conflicts:
#	components/autocomplete/readme.md
#	components/dropdown/readme.md
2016-04-06 20:50:12 -04:00
..
Clock.jsx Clock SSR fix 2016-02-19 15:43:29 +02:00
ClockFace.jsx Reorganize pickers 2015-11-22 22:13:27 +01:00
ClockHand.jsx Merge pull request #332 from sars/clock-ssr-fix 2016-02-19 16:17:03 +01:00
ClockHours.jsx Reorganize pickers 2015-11-22 22:13:27 +01:00
ClockMinutes.jsx Reorganize pickers 2015-11-22 22:13:27 +01:00
TimePicker.jsx Add pickers classNames to customize appereance 2015-12-20 18:08:55 +01:00
TimePickerDialog.jsx Add pickers classNames to customize appereance 2015-12-20 18:08:55 +01:00
_config.scss Added !default to all config values as per #424 2016-04-02 00:47:39 +02:00
index.js Remove jsx extension from imports in components 2015-11-28 20:24:46 +01:00
readme.md Fixed Spacing Issues for items in last commit. 2016-03-26 18:28:20 -04:00
style.clock.scss Add animated auto transition from hours to minutes in TimePicker 2015-12-12 11:35:31 +01:00
style.scss Add animated auto transition from hours to minutes in TimePicker 2015-12-12 11:35:31 +01:00

readme.md

Time Picker

A dialog picker is used to select a single time (hours:minutes). The selected time is indicated by the filled circle at the end of the clock hand.

import TimePicker from 'react-toolbox/lib/time_picker';
let time = new Date();
time.setHours(17);
time.setMinutes(28);

class TimePickerTest extends React.Component {
	state = {time};

  handleChange = (time) => {
  	this.setState({time});
  };

  render () {
  	return <TimePicker label='Finishing time' onChange={this.handleChange} value={this.state.time} />;
  }
}

Properties

Name Type Default Description
className String This class will be placed at the top of the TimePickerDialog component so you can provide custom styles.
error String Provide error text which will be displayed under the field.
format String 24hr Format to display the clock. It can be 24hr or ampm.
label String The text string to use for the floating label element in the input component.
onChange Function Callback called when the picker value is changed.
value Date Datetime object with currrently selected time.