Updated Docs for Date Picker

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

@@ -0,0 +1,123 @@
+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: '300px',
+  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'),
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <DatePicker
+          hintText="Portrait Dialog" />
+
+        <DatePicker
+          hintText="Landscape Dialog"
+          mode="landscape" />
+
+        <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} />
+
+        <DatePicker
+          hintText="Ranged Date Picker"
+          autoOk={this.state.autoOk}
+          minDate={this.state.minDate}
+          maxDate={this.state.maxDate}
+          showYearSelector={this.state.showYearSelector} />
+
+        <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" />
+
+        <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(e) {
+    this.setState({
+      minDate: new Date(e.target.value),
+    });
+  }
+
+  _updateMaxDate(e) {
+    this.setState({
+      maxDate: new Date(e.target.value),
+    });
+  }
+
+  _handleToggle(e, toggled) {
+    let state = {};
+    state[e.target.name] = toggled;
+    this.setState(state);
+  }
+
+  _handleChange(nill, date) {
+    this.setState({controlledDate: date});
+  }
+
+}
+
+export default DatePickerExampleSimple;

docs/src/app/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