Add time picker docs

components/date_picker/readme.md

@@ -16,7 +16,7 @@ const DatePickerTest = () => (
 
 | Name          | Type    | Default         | Description|
 | ------------- |:-------:|:--------------- |:---------- |
-| className     | String        |     `''`            | Sets a class to give customized styles to the checkbox field.|
+| className     | String        |     `''`            | Sets a class to give customized styles to the time picker.|
 | value         | Date    |                 | Date object with the currently selected date. |
 
 ## Methods

components/time_picker/readme.md

@@ -1,28 +1,31 @@
 # TimePicker
 
-```javascript
-var TimePicker = require('react-toolbox/components/time_picker');
+A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers) 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.
 
-var time = new Date();
-time.setHours(17);
-time.setMinutes(28);
+<!-- example -->
+```jsx
+import TimePicker from 'react-toolbox/time_picker';
 
-// Initialized time picker with AM-PM format
-<TimePicker format="ampm" value={time} />
+let selectedTime = new Date();
+selectedTime.setHours(17);
+selectedTime.setMinutes(28);
+
+const TimePickerTest = () => (
+  <TimePicker value={selectedTime} />
+);
 ```
 
 ## Properties
 
 | Name          | Type    | Default         | Description|
 | ------------- |:-------:|:--------------- |:---------- |
-| **format**    | String  | `24hr`          | Format to display the clock. It can be *24hr* or *ampm*.|
-| **value**     | Date    | `new Date()`    | Datetime object with currrent time by default |
+| className     | String        |     `''`            | Sets a class to give customized styles to the time picker.|
+| format    | String  | `24hr`          | Format to display the clock. It can be `24hr` or `ampm`.|
+| value     | Date    |   | Datetime object with currrently selected time |
 
 ## Methods
 
-#### getValue
-Returns the value of the picker.
+The TimePicker is a very easy component from the top level API but quite complex inside. It has state to keep the the currently selected value.
 
-```
-input_instance.getValue();
-```
+- `getValue` is used to retrieve the current value.
+- `setValue` to force a new value.

docs/app/components/layout/main/modules/components.js

@@ -29,6 +29,7 @@ import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
 import CardExample1 from './examples/card_example_1.txt';
 import CheckboxExample1 from './examples/checkbox_example_1.txt';
 import DatePickerExample1 from './examples/datepicker_example_1.txt';
+import TimePickerTest from './examples/timepicker_example_1.txt';
 
 export default {
   app_bar: {
@@ -149,6 +150,7 @@ export default {
   time_picker: {
     name: 'Time Picker',
     docs: TimePicker,
-    path: '/components/time_picker'
+    path: '/components/time_picker',
+    examples: [TimePickerTest]
   }
 };

docs/app/components/layout/main/modules/examples/timepicker_example_1.txt

@@ -0,0 +1,9 @@
+let selectedTime = new Date();
+selectedTime.setHours(17);
+selectedTime.setMinutes(28);
+
+const TimePickerTest = () => (
+  <TimePicker value={selectedTime} />
+);
+
+return <TimePickerTest />