Time Picker Docs File

docs/src/app/app-routes.jsx

@@ -31,6 +31,7 @@ var Snackbar = require('./components/pages/components/snackbar.jsx');
 var Switches = require('./components/pages/components/switches.jsx');
 var Tabs = require('./components/pages/components/tabs.jsx');
 var TextFields = require('./components/pages/components/text-fields.jsx');
+var TimePicker = require('./components/pages/components/time-picker.jsx');
 var Toolbars = require('./components/pages/components/toolbars.jsx');
 
 
@@ -70,6 +71,7 @@ var AppRoutes = (
  <Route name="snackbar" handler={Snackbar} />
  <Route name="tabs" handler={Tabs} />
  <Route name="text-fields" handler={TextFields} />
+ <Route name="time-picker" handler={TimePicker} />
  <Route name="toolbars" handler={Toolbars} />
  <Redirect from="/components" to="appbar" />
  </Route>

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

@@ -20,6 +20,7 @@ class Components extends React.Component {
  { route: 'snackbar', text: 'Snackbar'},
  { route: 'tabs', text: 'Tabs'},
  { route: 'text-fields', text: 'Text Fields'},
+ { route: 'time-picker', text: 'Time Picker'},
  { route: 'toolbars', text: 'Toolbars'},
  ];
 

docs/src/app/components/pages/components/time-picker.jsx

@@ -0,0 +1,85 @@
+var React = require('react');
+var mui = require('mui');
+var TimePicker = mui.TimePicker;
+var ComponentDoc = require('../../component-doc.jsx');
+
+var TimePickerPage = React.createClass({
+
+ render: function() {
+
+ var code =
+ '//The 12hr format \n' +
+ '<TimePicker\n' +
+ ' format="ampm" \n' +
+ ' hintText="12hr Format" />\n\n' +
+ '//The 24hr format \n' +
+ '<TimePicker\n' +
+ ' format="24hr" \n' +
+ ' hintText="24hr Format" /> '; 
+
+ var componentInfo = [
+ {
+ name: 'Props',
+ infoArray: [
+ {
+ name: 'defaultTime',
+ type: 'date object',
+ header: 'optional',
+ desc: 'This is the initial time value of the component.'
+ },
+ {
+ name: 'format',
+ type: 'one of: ampm, 24hr',
+ header: 'default: ampm',
+ desc: 'Tells the component to display the picker in ampm (12hr) format or 24hr format.'
+ }
+ ]
+ },
+ {
+ name: 'Methods',
+ infoArray: [
+ {
+ name: 'getTime',
+ header: 'DatePicker.getTime()',
+ desc: 'Returns the current time value.'
+ },
+ {
+ name: 'setTime',
+ header: 'DatePicker.setTime(t)',
+ desc: 'Sets the time value to t, where t is a date object.'
+ }
+ ]
+ }
+ ];
+
+ return (
+ <ComponentDoc
+ name="Time Picker"
+ code={code}
+ componentInfo={componentInfo}>
+
+ <TimePicker
+ ref="picker12hr"
+ format="ampm" 
+ hintText="12hr Format" 
+ onChange={this._changeTimePicker24} />
+
+ <TimePicker
+ ref="picker24hr"
+ format="24hr"
+ hintText="24hr Format"
+ onChange={this._changeTimePicker12} />
+
+ </ComponentDoc>
+ );
+ },
+ _changeTimePicker24: function(err, t){
+ this.refs.picker24hr.setTime(t);
+ },
+ _changeTimePicker12: function(err, t){
+ this.refs.picker12hr.setTime(t);
+ }
+
+});
+
+module.exports = TimePickerPage;