[Docs] Update Documentation for Time Picker

docs/src/app/app-routes.jsx

@@ -49,7 +49,7 @@ import Switches from './components/pages/components/switches';
 import Table from './components/pages/components/table';
 import TabsPage from './components/pages/components/Tabs/Page';
 import TextFieldPage from './components/pages/components/TextField/Page';
-import TimePicker from './components/pages/components/time-picker';
+import TimePickerPage from './components/pages/components/TimePicker/Page';
 import ToolbarsPage from './components/pages/components/Toolbars/Page';
 
 /**
@@ -112,7 +112,7 @@ const AppRoutes = (
       <Route path="table" component={Table} />
       <Route path="tabs" component={TabsPage} />
       <Route path="text-field" component={TextFieldPage} />
-      <Route path="time-picker" component={TimePicker} />
+      <Route path="time-picker" component={TimePickerPage} />
       <Route path="toolbars" component={ToolbarsPage} />
     </Route>
 

docs/src/app/components/pages/components/TimePicker/ExampleComplex.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import TimePicker from 'material-ui/lib/time-picker/time-picker';
+
+export default class TimePickerExampleComplex extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  handleChangeTimePicker24 = (err, time) => {
+    this.refs.picker24hr.setTime(time);
+  };
+
+  handleChangeTimePicker12 = (err, time) => {
+    this.refs.picker12hr.setTime(time);
+  };
+
+  render() {
+    return (
+      <div>
+        <TimePicker
+          ref="picker12hr"
+          format="ampm"
+          hintText="12hr Format"
+          onChange={this.handleChangeTimePicker24} />
+        <TimePicker
+          ref="picker24hr"
+          format="24hr"
+          hintText="24hr Format"
+          onChange={this.handleChangeTimePicker12} />
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/TimePicker/ExampleSimple.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import TimePicker from 'material-ui/lib/time-picker/time-picker';
+
+const TimePickerExampleSimple = () => (
+  <TimePicker
+    format="ampm"
+    hintText="12hr Format"
+  />
+);
+
+export default TimePickerExampleSimple;

docs/src/app/components/pages/components/TimePicker/Page.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import timePickerReadmeText from './README';
+import timePickerCode from '!raw!material-ui/lib/time-picker/time-picker';
+import TimePickerExampleSimple from './ExampleSimple';
+import timePickerExampleSimpleCode from '!raw!./ExampleSimple';
+import TimePickerExampleComplex from './ExampleComplex';
+import timePickerExampleComplexCode from '!raw!./ExampleComplex';
+
+const TimePickersPage = () => (
+  <div>
+    <MarkdownElement text={timePickerReadmeText} />
+    <CodeExample code={timePickerExampleSimpleCode}>
+      <TimePickerExampleSimple />
+    </CodeExample>
+    <CodeExample code={timePickerExampleComplexCode}>
+      <TimePickerExampleComplex />
+    </CodeExample>
+    <PropTypeDescription code={timePickerCode} />
+  </div>
+);
+
+export default TimePickersPage;

docs/src/app/components/pages/components/TimePicker/README.md

@@ -0,0 +1,6 @@
+## Time Picker
+
+A [time picker](https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers)
+is used to input a time by displaying an interface the user can interact with.
+
+### Examples

src/time-picker/time-picker.jsx

@@ -17,20 +17,69 @@ emptyTime.setMilliseconds(0);
 const TimePicker = React.createClass({
 
   propTypes: {
+    /**
+     * If true, automatically accept and close the picker on set minutes.
+     */
     autoOk: React.PropTypes.bool,
+
+    /**
+     * This is the initial time value of the component.
+     */
     defaultTime: React.PropTypes.object,
+
+    /**
+     * Tells the component to display the picker in
+     * ampm (12hr) format or 24hr format.
+     */
     format: React.PropTypes.oneOf(['ampm', '24hr']),
+
+    /**
+     * Callback function that is fired when the time
+     * value changes. The time value is passed in a Date
+     * Object.Since there is no particular event associated
+     * with the change the first argument will always be null
+     * and the second argument will be the new Date instance.
+     */
     onChange: React.PropTypes.func,
+
+    /**
+     * Fired when the timepicker dialog is dismissed.
+     */
     onDismiss: React.PropTypes.func,
+
+    /**
+     * Callback function that is fired when the timepicker field gains focus.
+     */
     onFocus: React.PropTypes.func,
+
+    /**
+     * Fired when the timepicker dialog is shown.
+     */
     onShow: React.PropTypes.func,
+
+    /**
+     * Callback for touch tap event.
+     */
     onTouchTap: React.PropTypes.func,
+
+    /**
+     * It's technically more correct to refer to
+     * "12 noon" and "12 midnight" rather than
+     * "12 a.m." and "12 p.m." and it avoids real
+     * confusion between different locales. By default
+     * (for compatibility reasons) TimePicker uses
+     * (12 a.m./12 p.m.) To use (noon/midnight) set pedantic={true}.
+     */
     pedantic: React.PropTypes.bool,
 
     /**
      * Override the inline-styles of the root element.
      */
     style: React.PropTypes.object,
+
+    /**
+     * Override the inline-styles of TimePicker's TextField element.
+     */
     textFieldStyle: React.PropTypes.object,
   },