Merge pull request #368 from felipeleusin/datepicker_auto_ok

Datepicker auto ok

components/date_picker/Calendar.jsx

@@ -40,13 +40,13 @@ class Calendar extends React.Component {
   }
 
   handleDayClick = (day) => {
-    this.props.onChange(time.setDay(this.state.viewDate, day));
+    this.props.onChange(time.setDay(this.state.viewDate, day), true);
   };
 
   handleYearClick = (year) => {
     const viewDate = time.setYear(this.props.selectedDate, year);
     this.setState({viewDate});
-    this.props.onChange(viewDate);
+    this.props.onChange(viewDate, false);
   };
 
   changeViewMonth = (direction, step) => {

components/date_picker/DatePicker.jsx

@@ -7,6 +7,7 @@ import time from '../utils/time';
 
 class DatePicker extends React.Component {
   static propTypes = {
+    autoOk: React.PropTypes.boolean,
     className: React.PropTypes.string,
     error: React.PropTypes.string,
     inputFormat: React.PropTypes.func,
@@ -52,6 +53,7 @@ class DatePicker extends React.Component {
           value={date}
         />
         <DatePickerDialog
+          autoOk={this.props.autoOk}
           active={this.state.active}
           className={this.props.className}
           maxDate={this.props.maxDate}

components/date_picker/DatePickerDialog.jsx

@@ -8,6 +8,7 @@ import time from '../utils/time';
 class CalendarDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    autoOk: React.PropTypes.bool,
     className: React.PropTypes.string,
     maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
@@ -27,12 +28,15 @@ class CalendarDialog extends React.Component {
     display: 'months'
   };
 
-  handleCalendarChange = (value) => {
+  handleCalendarChange = (value, dayClick) => {
     const state = {display: 'months', date: value};
     if (time.dateOutOfRange(value, this.props.minDate, this.props.maxDate)) {
       state.date = this.props.maxDate || this.props.minDate;
     }
     this.setState(state);
+    if (dayClick && this.props.autoOk && this.props.onSelect) {
+      this.props.onSelect(value);
+    }
   };
 
   handleSelect = (event) => {

components/date_picker/readme.md

@@ -34,6 +34,7 @@ class DatePickerTest extends React.Component {
 
 | Name          | Type    | Default         | Description|
 |:-----|:-----|:-----|:-----|
+| `autoOk`         | `boolean`        |  false      | Automatically selects a date upon clicking on a day|
 | `className`         | `String`        |             | This class will be placed at the top of the `DatePickerDialog` component so you can provide custom styles.|
 | `label`         | `String`        |             | The text string to use for the floating label element in the input component.|
 | `maxDate`         | `Date`    |                 | Date object with the maximum selectable date. |

components/dialog/Dialog.jsx

@@ -42,8 +42,8 @@ Dialog.propTypes = {
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
   onOverlayMouseDown: React.PropTypes.func,
-  onOverlayMouseUp: React.PropTypes.func,
   onOverlayMouseMove: React.PropTypes.func,
+  onOverlayMouseUp: React.PropTypes.func,
   title: React.PropTypes.string,
   type: React.PropTypes.string
 };

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

@@ -29,6 +29,7 @@ class DatePickerTest extends React.Component {
 
         <DatePicker
           label='Formatted Date'
+          autoOk
           inputFormat={(value) => `${value.getDate()}/${value.getMonth()}/${value.getFullYear()}`}
           onChange={this.handleChange.bind(this, 'date3')}
           value={this.state.date3}

spec/components/pickers.jsx

@@ -48,6 +48,13 @@ class PickersTest extends React.Component {
           value={this.state.date3}
         />
 
+        <DatePicker
+          label='Auto Picker'
+          autoOk
+          onChange={this.handleChange.bind(this, 'date4')}
+          value={this.state.date4}
+        />
+
         <TimePicker
           label='Start time'
           onChange={this.handleChange.bind(this, 'time1')}