Merge pull request #538 from castrolol/master

[Improvement] DatePicker properties autoOk, minDate e maxDate
mui · Apr 17, 2015 · c6967d1 · c6967d1
2 parents d715213 + 5eafac1
commit c6967d1
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 5 deletions.
diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
@@ -38,6 +38,24 @@ var DatePickerPage = React.createClass({
             type: 'one of: portrait, landscape',
             header: 'default: portrait',
             desc: 'Tells the component to display the picker in portrait or landscape mode.'
+          },
+          {
+            name: 'autoOk',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'If true, automatically accept and close the picker on select a date.'
+          },
+          {
+            name: 'maxDate',
+            type: 'date object',
+            header: 'optional',
+            desc: 'Indicates the maximum selectable date.'
+          },
+          {
+            name: 'minDate',
+            type: 'date object',
+            header: 'optional',
+            desc: 'Indicates the minimum selectable date.'
           }
         ]
       },

diff --git a/src/js/date-picker/calendar-month.jsx b/src/js/date-picker/calendar-month.jsx
@@ -10,7 +10,10 @@ var CalendarMonth = React.createClass({
   propTypes: {
     displayDate: React.PropTypes.object.isRequired,
     onDayTouchTap: React.PropTypes.func,
-    selectedDate: React.PropTypes.object.isRequired
+    selectedDate: React.PropTypes.object.isRequired,
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object,
+    autoOk: React.PropTypes.bool
   },
 
   render: function() {
@@ -36,14 +39,29 @@ var CalendarMonth = React.createClass({
       );
     }, this);
   },
+  _isDisabled: function(day){
+    var minDate = this.props.minDate;
+    var maxDate = this.props.maxDate;
 
+    if(minDate != null && day < minDate){
+      return true;
+    }
+
+    if(maxDate != null && day > maxDate){
+      return true;
+    }
+
+    return false;
+  },
   _getDayElements: function(week) {
     return week.map(function(day, i) {
       var selected = DateTime.isEqualDate(this.props.selectedDate, day);
+      var disabled = this._isDisabled(day);
       return (
         <DayButton
           key={i}
           date={day}
+          disabled={disabled}
           onTouchTap={this._handleDayTouchTap}
           selected={selected} />
       );

diff --git a/src/js/date-picker/calendar-toolbar.jsx b/src/js/date-picker/calendar-toolbar.jsx
@@ -10,7 +10,16 @@ var CalendarToolbar = React.createClass({
   propTypes: {
     displayDate: React.PropTypes.object.isRequired,
     onLeftTouchTap: React.PropTypes.func,
-    onRightTouchTap: React.PropTypes.func
+    onRightTouchTap: React.PropTypes.func,
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object
+  },
+
+  getDefaultProps: function () {
+      return {
+        maxDate: null,
+        minDate: null
+      };
   },
 
   getInitialState: function() {
@@ -29,11 +38,33 @@ var CalendarToolbar = React.createClass({
       });
     }
   },
+  _isDisabled: function(direction){
+
+    var date = this.props.displayDate;
+    var minDate = this.props.minDate;
+    var maxDate = this.props.maxDate;
+
+    if(direction == "left" && minDate){      
+      if(date.getFullYear() < minDate.getFullYear()) return true;
+      if(date.getFullYear() == minDate.getFullYear()){
+        return date.getMonth() <= minDate.getMonth();
+      }
+    }else if(direction == "right" && maxDate){
+      if(date.getFullYear() > maxDate.getFullYear()) return true;
+      if(date.getFullYear() == maxDate.getFullYear()){
+        return date.getMonth() >= maxDate.getMonth();
+      }
+    }
 
+    return false;
+  },
   render: function() {
     var month = DateTime.getFullMonth(this.props.displayDate);
     var year = this.props.displayDate.getFullYear();
 
+    var disableLeft = this._isDisabled("left");
+    var disableRight = this._isDisabled("right");
+
     return (
       <div className="mui-date-picker-calendar-toolbar">
 
@@ -44,12 +75,14 @@ var CalendarToolbar = React.createClass({
         </SlideInTransitionGroup>
 
         <IconButton
+          disabled={disableLeft}
           className="mui-date-picker-calendar-toolbar-button-left"
           onTouchTap={this.props.onLeftTouchTap}>
             <NavigationChevronLeft/>
         </IconButton>
 
         <IconButton
+          disabled={disableRight}        
           className="mui-date-picker-calendar-toolbar-button-right"
           onTouchTap={this.props.onRightTouchTap}>
             <NavigationChevronRight/>

diff --git a/src/js/date-picker/calendar.jsx b/src/js/date-picker/calendar.jsx
@@ -14,7 +14,10 @@ var Calendar = React.createClass({
 
   propTypes: {
     initialDate: React.PropTypes.object,
-    isActive: React.PropTypes.bool
+    isActive: React.PropTypes.bool,
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object,
+    onSelectedDate: React.PropTypes.func
   },
 
   windowListeners: {
@@ -23,7 +26,9 @@ var Calendar = React.createClass({
 
   getDefaultProps: function() {
     return {
-      initialDate: new Date()
+      initialDate: new Date(),
+      maxDate: null,
+      minDate: null
     };
   },
 
@@ -63,6 +68,8 @@ var Calendar = React.createClass({
         <div
           className="mui-date-picker-calendar-container">
           <CalendarToolbar
+            minDate={this.props.minDate}
+            maxDate={this.props.maxDate} 
             displayDate={this.state.displayDate}
             onLeftTouchTap={this._handleLeftTouchTap}
             onRightTouchTap={this._handleRightTouchTap} />
@@ -80,6 +87,8 @@ var Calendar = React.createClass({
           <SlideInTransitionGroup
             direction={this.state.transitionDirection}>
             <CalendarMonth
+              minDate={this.props.minDate}
+              maxDate={this.props.maxDate} 
               key={this.state.displayDate.toDateString()}
               displayDate={this.state.displayDate}
               onDayTouchTap={this._handleDayTouchTap}
@@ -131,6 +140,7 @@ var Calendar = React.createClass({
         selectedDate: d
       });
     }
+    if(this.props.onSelectedDate) this.props.onSelectedDate(d);
   },
 
   _handleDayTouchTap: function(e, date) {

diff --git a/src/js/date-picker/date-picker-dialog.jsx b/src/js/date-picker/date-picker-dialog.jsx
@@ -15,6 +15,8 @@ var DatePickerDialog = React.createClass({
     onAccept: React.PropTypes.func,
     onShow: React.PropTypes.func,
     onDismiss: React.PropTypes.func,
+    minDate: React.PropTypes.object,
+    maxDate: React.PropTypes.object,
   },
 
   windowListeners: {
@@ -47,6 +49,10 @@ var DatePickerDialog = React.createClass({
         onTouchTap={this._handleOKTouchTap} />
     ];
 
+    if(this.props.autoOk){
+      actions = actions.slice(0, 1);
+    }
+
     return (
       <DialogWindow {...other}
         ref="dialogWindow"
@@ -57,7 +63,10 @@ var DatePickerDialog = React.createClass({
         onShow={this._handleDialogShow}
         repositionOnUpdate={false}>
         <Calendar
+          minDate={this.props.minDate}
+          maxDate={this.props.maxDate}
           ref="calendar"
+          onSelectedDate={this._onSelectedDate}
           initialDate={this.props.initialDate}
           isActive={this.state.isCalendarActive} />
       </DialogWindow>
@@ -72,6 +81,12 @@ var DatePickerDialog = React.createClass({
     this.refs.dialogWindow.dismiss();
   },
 
+  _onSelectedDate: function(){
+    if(this.props.autoOk){
+      setTimeout(this._handleOKTouchTap.bind(this), 300);
+    }
+  },
+
   _handleCancelTouchTap: function() {
     this.dismiss();
   },

diff --git a/src/js/date-picker/date-picker.jsx b/src/js/date-picker/date-picker.jsx
@@ -19,6 +19,9 @@ var DatePicker = React.createClass({
     onChange: React.PropTypes.func,
     onShow: React.PropTypes.func,
     onDismiss: React.PropTypes.func,
+    minDate: React.PropTypes.object,
+    maxDate: React.PropTypes.object,
+    autoOk: React.PropTypes.bool,
   },
 
   windowListeners: {
@@ -27,7 +30,10 @@ var DatePicker = React.createClass({
 
   getDefaultProps: function() {
     return {
-      formatDate: DateTime.format
+      formatDate: DateTime.format,
+      minDate: null,
+      maxDate: null,
+      autoOk: false
     };
   },
 
@@ -46,6 +52,9 @@ var DatePicker = React.createClass({
       onTouchTap,
       onShow,
       onDismiss,
+      minDate,
+      maxDate,
+      autoOk,
       ...other
     } = this.props;
     var classes = this.getClasses('mui-date-picker', {
@@ -67,6 +76,9 @@ var DatePicker = React.createClass({
           onFocus={this._handleInputFocus}
           onTouchTap={this._handleInputTouchTap} />
         <DatePickerDialog
+          minDate={minDate} 
+          maxDate={maxDate} 
+          autoOk={autoOk}
           ref="dialogWindow"
           initialDate={this.state.dialogDate}
           onAccept={this._handleDialogAccept}

diff --git a/src/less/components/date-picker/day-button.less b/src/less/components/date-picker/day-button.less
@@ -28,6 +28,10 @@
       transform: scale(1);
     }
   }
+
+  &.mui-is-disabled {
+    color: @disabled-color;
+  }
 
   &.mui-is-current-date {
     color: @date-picker-color;