Improve date picker

components/date_picker/calendar/index.jsx

@@ -21,7 +21,6 @@ class Calendar extends React.Component {
   };
 
   state = {
-    selectedDate: this.props.selectedDate,
     viewDate: this.props.selectedDate
   };
 
@@ -39,15 +38,13 @@ class Calendar extends React.Component {
   }
 
   handleDayClick = (day) => {
-    const newDate = utils.time.setDay(this.state.viewDate, day);
-    this.setState({selectedDate: newDate});
-    if (this.props.onChange) this.props.onChange(newDate);
+    this.props.onChange(utils.time.setDay(this.state.viewDate, day));
   };
 
   handleYearClick = (year) => {
-    const newDate = utils.time.setYear(this.state.selectedDate, year);
-    this.setState({selectedDate: newDate, viewDate: newDate});
-    if (this.props.onChange) this.props.onChange(newDate);
+    const viewDate = utils.time.setYear(this.props.selectedDate, year);
+    this.setState({viewDate});
+    this.props.onChange(viewDate);
   };
 
   incrementViewMonth = () => {
@@ -102,7 +99,7 @@ class Calendar extends React.Component {
           <Month
             key={this.state.viewDate.getMonth()}
             viewDate={this.state.viewDate}
-            selectedDate={this.state.selectedDate}
+            selectedDate={this.props.selectedDate}
             onDayClick={this.handleDayClick} />
         </CSSTransitionGroup>
       </div>

components/date_picker/dialog.jsx

@@ -7,69 +7,59 @@ import Dialog from '../dialog';
 class CalendarDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
-    initialDate: React.PropTypes.object,
-    onCancel: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onSelect: React.PropTypes.func
+    onDismiss: React.PropTypes.func,
+    onSelect: React.PropTypes.func,
+    value: React.PropTypes.object
   };
 
   static defaultProps = {
     active: false,
-    initialDate: new Date()
+    value: new Date()
   };
 
   state = {
-    date: this.props.initialDate,
-    display: 'months',
-    actions: [
-      { label: 'Cancel', className: style.button, onClick: this.handleCancel.bind(this) },
-      { label: 'Ok', className: style.button, onClick: this.handleSelect.bind(this) }
-    ]
+    date: this.props.value,
+    display: 'months'
   };
 
   handleCalendarChange = (value) => {
     this.setState({date: value, display: 'months'});
-    if (this.props.onChange) this.props.onChange(value);
   };
 
-  displayMonths = () => {
-    this.setState({display: 'months'});
-  };
-
-  displayYears = () => {
-    this.setState({display: 'years'});
-  };
-
-  handleCancel () {
-    if (this.props.onCancel) this.props.onCancel();
-  }
-
-  handleSelect () {
+  handleSelect = () => {
     if (this.props.onSelect) this.props.onSelect(this.state.date);
-  }
+  };
+
+  handleSwitchDisplay = (display) => {
+    this.setState({ display });
+  };
+
+  actions = [
+    { label: 'Cancel', className: style.button, onClick: this.props.onDismiss },
+    { label: 'Ok', className: style.button, onClick: this.handleSelect }
+  ];
 
   render () {
     const display = `display-${this.state.display}`;
     const headerClassName = `${style.header} ${style[display]}`;
 
     return (
-      <Dialog active={this.props.active} type="custom" className={style.dialog} actions={this.state.actions}>
+      <Dialog active={this.props.active} type="custom" className={style.dialog} actions={this.actions}>
           <header className={headerClassName}>
             <span className={style.weekday}>
               {time.getFullDayOfWeek(this.state.date.getDay())}
             </span>
-            <div onClick={this.displayMonths}>
+            <div onClick={this.handleSwitchDisplay.bind(this, 'months')}>
               <span className={style.month}>{time.getShortMonth(this.state.date)}</span>
               <span className={style.day}>{this.state.date.getDate()}</span>
             </div>
-            <span className={style.year} onClick={this.displayYears}>
+            <span className={style.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
               {this.state.date.getFullYear()}
             </span>
           </header>
 
           <div className={style.wrapper}>
             <Calendar
-              ref='calendar'
               display={this.state.display}
               onChange={this.handleCalendarChange}
               selectedDate={this.state.date} />

components/date_picker/index.jsx

@@ -7,15 +7,10 @@ import style from './style';
 
 class DatePicker extends React.Component {
   static propTypes = {
-    className: React.PropTypes.string,
     onChange: React.PropTypes.func,
     value: React.PropTypes.object
   };
 
-  static defaultProps = {
-    className: ''
-  };
-
   state = {
     active: false
   };

components/date_picker/readme.md

@@ -6,16 +6,35 @@ A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-da
 ```jsx
 import DatePicker from 'react-toolbox/lib/date_picker';
 
-const selectedDate = new Date(1995, 11, 17);
-const DatePickerTest = () => (
-  <DatePicker value={selectedDate} />
-);
+const datetime = new Date(1995, 11, 17);
+datetime.setHours(17);
+datetime.setMinutes(28);
+
+class DatePickerTest extends React.Component {
+  state = {
+    date2: datetime
+  };
+
+  handleChange = (item, value) => {
+    const newState = {};
+    newState[item] = value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
+        <DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
+      </section>
+    );
+  }
+}
 ```
 
 ## Properties
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `className`     | `String`        |     `''`            | Sets a class to give customized styles to the time picker.|
 | `onChange`       | `Function`       |                | Callback called when the picker value is changed.|
 | `value`         | `Date`    |                 | Date object with the currently selected date. |

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

@@ -1,7 +1,26 @@
-const selectedDate = new Date(1995, 11, 17);
+const datetime = new Date(1995, 11, 17);
+datetime.setHours(17);
+datetime.setMinutes(28);
 
-const DatePickerTest = () => (
-  <DatePicker value={selectedDate} />
-);
+class DatePickerTest extends React.Component {
+  state = {
+    date2: datetime
+  };
+
+  handleChange = (item, value) => {
+    const newState = {};
+    newState[item] = value;
+    this.setState(newState);
+  };
+
+  render () {
+    return (
+      <section>
+        <DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
+        <DatePicker value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
+      </section>
+    );
+  }
+}
 
 return <DatePickerTest />;

spec/components/pickers.jsx

@@ -32,7 +32,6 @@ class PickersTest extends React.Component {
       </section>
     );
   }
-
 }
 
 export default PickersTest;