Year selector for date picker.

Fonseca1990 · May 19, 2015 · f8bdaf3 · f8bdaf3
1 parent 2f1d412
commit f8bdaf3
Show file tree

Hide file tree

Showing 28 changed files with 931 additions and 266 deletions.
diff --git a/docs/src/app/components/pages/components/date-picker.jsx b/docs/src/app/components/pages/components/date-picker.jsx
@@ -1,9 +1,26 @@
 var React = require('react');
 var mui = require('mui');
 var DatePicker = mui.DatePicker;
+var TextField = mui.TextField;
+var Toggle = mui.Toggle;
 var ComponentDoc = require('../../component-doc.jsx');
 
 class DatePickerPage extends React.Component {
+  constructor() {
+    var minDate = new Date();
+    var 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,
+      showYearSelector: false
+    };
+  }
 
   render() {
 
@@ -14,7 +31,14 @@ class DatePickerPage extends React.Component {
       '//Landscape Dialog\n' +
       '<DatePicker\n' +
       '  hintText="Landscape Dialog"\n' +
-      '  mode="landscape"/>';
+      '  mode="landscape"/>\n\n'+
+      '// Ranged Date Picker\n' +
+      '<DatePicker\n' +
+      '  hintText="Ranged Date Picker"\n' +
+      '  autoOk={this.state.autoOk}\n' +
+      '  minDate={this.state.minDate}\n' +
+      '  maxDate={this.state.maxDate}\n' +
+      '  showYearSelector={this.state.showYearSelector} />';
 
     var componentInfo = [
       {
@@ -40,22 +64,45 @@ class DatePickerPage extends React.Component {
             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: 'minDate',
+            type: 'date object',
+            header: 'optional',
+            desc: 'The beginning of a range of valid dates. The range includes the startDate. ' +
+              'The default value is current date - 100 years.'
           },
           {
             name: 'maxDate',
             type: 'date object',
             header: 'optional',
-            desc: 'Indicates the maximum selectable date.'
+            desc: 'The ending of a range of valid dates. The range includes the endDate. ' +
+              'The default value is current date + 100 years.'
           },
           {
-            name: 'minDate',
-            type: 'date object',
+            name: 'shouldDisableDate',
+            type: 'function',
             header: 'optional',
-            desc: 'Indicates the minimum selectable date.'
+            desc: 'Called during render time of a given day. If this method returns false ' +
+              'the day is disabled otherwise it is displayed normally.'
+          },
+          {
+            name: 'hideToolbarYearChange',
+            type: 'boolean',
+            header: 'optional',
+            desc: 'Hide year change buttons on calendar; good for short time spans. Clicking ' +
+              'the year will always result in selecting a year.'
+          },
+          {
+            name: 'showYearSelector',
+            type: 'boolean',
+            header: 'default: false',
+            desc: 'Determines whether or not a DatePicker has a year selection capability. ' +
+              'If false, the year change buttons in the toolbar are hidden.'
+          },
+          {
+            name: 'autoOk',
+            type: 'bool',
+            header: 'default: false',
+            desc: 'If true, automatically accept and close the picker on select a date.'
           },
           {
             name: 'style',
@@ -82,6 +129,11 @@ class DatePickerPage extends React.Component {
       }
     ];
 
+    var optionsStyle = {
+      width: '300px',
+      margin: '0 auto'
+    };
+
     return (
       <ComponentDoc
         name="Date Picker"
@@ -95,10 +147,60 @@ class DatePickerPage extends React.Component {
           hintText="Landscape Dialog"
           mode="landscape" />
 
+        <DatePicker
+          hintText="Ranged Date Picker"
+          autoOk={this.state.autoOk}
+          minDate={this.state.minDate}
+          maxDate={this.state.maxDate}
+          showYearSelector={this.state.showYearSelector} />
+
+        <div style={optionsStyle}>
+          <TextField
+            floatingLabelText="Min Date"
+            defaultValue={this.state.minDate.toDateString()}
+            onChange={this._updateMinDate.bind(this)} />
+
+          <TextField
+            floatingLabelText="Max Date"
+            defaultValue={this.state.maxDate.toDateString()}
+            onChange={this._updateMaxDate.bind(this)} />
+
+          <Toggle
+            name="autoOk"
+            value="autoOk"
+            label="Auto Accept"
+            defaultToggled={this.state.autoOk}
+            onToggle={this._handleToggle.bind(this)} />
+
+            <Toggle
+              name="showYearSelector"
+              value="showYearSelector"
+              label="Show Year Selector"
+              defaultToggled={this.state.showYearSelector}
+              onToggle={this._handleToggle.bind(this)} />
+        </div>
       </ComponentDoc>
     );
   }
 
+  _updateMinDate(e) {
+    this.setState({
+      minDate: new Date(e.target.value)
+    });
+  }
+
+  _updateMaxDate(e) {
+    this.setState({
+      maxDate: new Date(e.target.value)
+    });
+  }
+
+  _handleToggle(e, toggled) {
+    var state = {};
+    state[e.target.name] = toggled;
+    this.setState(state);
+  }
+
 }
 
 module.exports = DatePickerPage;
diff --git a/src/date-picker/calendar-month.jsx b/src/date-picker/calendar-month.jsx
@@ -1,20 +1,18 @@
 var React = require('react');
-var StylePropable = require('../mixins/style-propable');
 var Colors = require('../styles/colors');
 var DateTime = require('../utils/date-time');
 var DayButton = require('./day-button');
 var ClearFix = require('../clearfix');
 
 var CalendarMonth = React.createClass({
 
-  mixins: [StylePropable],
-
   propTypes: {
     displayDate: React.PropTypes.object.isRequired,
     onDayTouchTap: React.PropTypes.func,
     selectedDate: React.PropTypes.object.isRequired,
-    maxDate: React.PropTypes.object,
     minDate: React.PropTypes.object,
+    maxDate: React.PropTypes.object,
+    shouldDisableDate: React.PropTypes.func,
     autoOk: React.PropTypes.bool
   },
 
@@ -31,51 +29,62 @@ var CalendarMonth = React.createClass({
       </div>
     );
   },
+
+  isSelectedDateDisabled: function() {
+    return this._selectedDateDisabled;
+  },
 
   _getWeekElements: function() {
     var weekArray = DateTime.getWeekArray(this.props.displayDate);
 
     return weekArray.map(function(week, i) {
       return (
         <ClearFix key={i}>
-          {this._getDayElements(week)}
+          {this._getDayElements(week, i)}
         </ClearFix>
       );
     }, this);
   },
-  _isDisabled: function(day){
-    var minDate = this.props.minDate;
-    var maxDate = this.props.maxDate;
 
-    if(minDate != null && day < minDate){
-      return true;
-    }
+  _getDayElements: function(week, i) {
+    return week.map(function(day, j) {
+      var isSameDate = DateTime.isEqualDate(this.props.selectedDate, day);
+      var disabled = this._shouldDisableDate(day);
+      var selected = !disabled && isSameDate;
+
+      if (isSameDate) {
+        if (disabled) {
+          this._selectedDateDisabled = true;
+        }
+        else {
+          this._selectedDateDisabled = false;
+        }
+      }
 
-    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}
+          key={'db' + i + j}
           date={day}
           disabled={disabled}
           onTouchTap={this._handleDayTouchTap}
-          selected={selected} />
+          selected={selected}
+          disabled={disabled} />
       );
     }, this);
   },
 
   _handleDayTouchTap: function(e, date) {
     if (this.props.onDayTouchTap) this.props.onDayTouchTap(e, date);
+  },
+
+  _shouldDisableDate: function(day) {
+    if (day === null) return false;
+    var disabled = !DateTime.isBetweenDates(day, this.props.minDate, this.props.maxDate);
+    if (!disabled && this.props.shouldDisableDate) disabled = this.props.shouldDisableDate(day);
+
+    return disabled;
   }
 
 });
 
-module.exports = CalendarMonth;
+module.exports = CalendarMonth;