Updated Docs for Date Picker

docs/src/app/app-routes.jsx

@@ -28,7 +28,7 @@ import AvatarPage from './components/pages/components/Avatar/Page';
 import BadgePage from './components/pages/components/Badge/Page';
 import Buttons from './components/pages/components/buttons';
 import CardPage from './components/pages/components/Card/Page';
-import DatePicker from './components/pages/components/date-picker';
+import DatePicker from './components/pages/components/DatePicker/Page';
 import DialogPage from './components/pages/components/Dialog/Page';
 import DividerPage from './components/pages/components/Divider/Page';
 import DropDownMenuPage from './components/pages/components/DropDownMenu/Page';

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import DatePicker from 'material-ui/lib/date-picker/date-picker';
+
+export default class DatePickerExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      controlledDate: new Date('2015/07/15'),
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <DatePicker
+          hintText="Inline"
+          container="inline" />
+        <DatePicker
+          hintText="Inline (AutoOk)"
+          container="inline"
+          autoOk={true} />
+        <DatePicker
+          hintText="Controlled Date Input"
+          value={this.state.controlledDate}
+          onChange={this._handleChange} />
+      </div>
+    );
+  }
+
+  _handleChange = (e, date) => {
+    this.setState({controlledDate: date});
+  }
+}
+
+export default DatePickerExampleSimple;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import DatePicker from 'material-ui/lib/date-picker/date-picker';
+
+export default class DatePickerExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <DatePicker
+        hintText="fr version"
+        DateTimeFormat={Intl.DateTimeFormat}
+        // Intl is supported by most modern browsers, see http://caniuse.com/#search=intl
+        // for browsers that don't support it use this polyfill https://github.com/andyearnshaw/Intl.js
+        wordings={{ok: 'OK', cancel: 'Annuler'}}
+        locale="fr" />
+    );
+  }
+}
+
+export default DatePickerExampleSimple;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import DatePicker from 'material-ui/lib/date-picker/date-picker';
+
+export default class DatePickerExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <DatePicker
+          hintText="Portrait Dialog" />
+        <DatePicker
+          hintText="Landscape Dialog"
+          mode="landscape" />
+      </div>
+    );
+  }
+}
+
+export default DatePickerExampleSimple;

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import DatePicker from 'material-ui/lib/date-picker/date-picker';
+import TextField from 'material-ui/lib/text-field';
+import Toggle from 'material-ui/lib/toggle';
+
+const optionsStyle = {
+  width: 300,
+  margin: '0 auto',
+};
+
+export default class DatePickerExampleSimple extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    let minDate = new Date();
+    let maxDate = new Date();
+    minDate.setFullYear(minDate.getFullYear() - 1);
+    minDate.setHours(0, 0, 0, 0);
+    maxDate.setFullYear(maxDate.getFullYear() + 1);
+    maxDate.setHours(0, 0, 0, 0);
+
+    this.state = {
+      minDate: minDate,
+      maxDate: maxDate,
+      autoOk: false,
+      controlledDate: new Date('2015/07/15'),
+      disableYearSelection: false,
+    };
+  }
+
+  render() {
+    return (
+      <div>
+
+        <DatePicker
+          hintText="Ranged Date Picker"
+          autoOk={this.state.autoOk}
+          minDate={this.state.minDate}
+          maxDate={this.state.maxDate}
+          disableYearSelection={this.state.disableYearSelection} />
+
+
+        <div style={optionsStyle}>
+          <TextField
+            floatingLabelText="Min Date"
+            defaultValue={this.state.minDate.toDateString()}
+            onChange={this._updateMinDate} />
+
+          <TextField
+            floatingLabelText="Max Date"
+            defaultValue={this.state.maxDate.toDateString()}
+            onChange={this._updateMaxDate} />
+
+          <Toggle
+            name="autoOk"
+            value="autoOk"
+            label="Auto Accept"
+            defaultToggled={this.state.autoOk}
+            onToggle={this._handleToggle} />
+
+          <Toggle
+            name="disableYearSelection"
+            value="disableYearSelection"
+            label="Disable Year Selection"
+            defaultToggled={this.state.disableYearSelection}
+            onToggle={this._handleToggle} />
+        </div>
+      </div>
+    );
+  }
+
+  _updateMinDate = (event) => {
+    this.setState({
+      minDate: new Date(event.target.value),
+    });
+  }
+
+  _updateMaxDate = (event) => {
+    this.setState({
+      maxDate: new Date(event.target.value),
+    });
+  }
+
+  _handleToggle = (event, toggled) => {
+    let state = {};
+    state[event.target.name] = toggled;
+    this.setState(state);
+  }
+}
+
+export default DatePickerExampleSimple;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import datePickerCode from '!raw!material-ui/lib/date-picker/date-picker';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+import DatePickerExampleSimple from './ExampleSimple';
+import datePickerExampleSimpleCode from '!raw!./ExampleSimple';
+import DatePickerExampleInline from './ExampleInline';
+import datePickerExampleInlineCode from '!raw!./ExampleInline';
+import DatePickerExampleToggle from './ExampleToggle';
+import datePickerExampleToggleCode from '!raw!./ExampleToggle';
+import DatePickerExampleInternational from './ExampleInternational';
+import datePickerExampleInternationalCode from '!raw!./ExampleInternational';
+
+import datePickerReadmeText from './README';
+
+if (!window.Intl) {
+  require('intl');
+  require('intl/locale-data/jsonp/fr');
+}
+
+export default class DatePickerPage extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <MarkdownElement text={datePickerReadmeText} />
+        <CodeExample code={datePickerExampleSimpleCode}>
+          <DatePickerExampleSimple/>
+        </CodeExample>
+        <CodeExample code={datePickerExampleInlineCode}>
+          <DatePickerExampleInline/>
+        </CodeExample>
+        <CodeExample code={datePickerExampleToggleCode}>
+          <DatePickerExampleToggle/>
+        </CodeExample>
+        <CodeExample code={datePickerExampleInternationalCode}>
+          <DatePickerExampleInternational/>
+        </CodeExample>
+        <PropTypeDescription code={datePickerCode} />
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,3 @@
+## Date Picker
+[Date Pickers](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers) are used to select a single date for an input. 
+### Examples