Merge branch 'dev' of https://github.com/dhamilton91/react-toolbox into dhamilton91-dev

* 'dev' of https://github.com/dhamilton91/react-toolbox:
  Added enabled and disabled date properties to date picker.

components/date_picker/Calendar.js

@@ -10,7 +10,9 @@ const DIRECTION_STEPS = { left: -1, right: 1 };
 const factory = (IconButton) => {
   class Calendar extends Component {
     static propTypes = {
+      disabledDates: React.PropTypes.array,
       display: PropTypes.oneOf(['months', 'years']),
+      enabledDates: React.PropTypes.array,
       handleSelect: PropTypes.func,
       locale: React.PropTypes.oneOfType([
         React.PropTypes.string,
@@ -125,6 +127,8 @@ const factory = (IconButton) => {
           <IconButton id='right' className={theme.next} icon='chevron_right' onClick={this.changeViewMonth} />
           <CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
             <CalendarMonth
+              enabledDates={this.props.enabledDates}
+              disabledDates={this.props.disabledDates}
               key={this.state.viewDate.getMonth()}
               locale={this.props.locale}
               maxDate={this.props.maxDate}

components/date_picker/CalendarMonth.js

@@ -5,6 +5,8 @@ import CalendarDay from './CalendarDay.js';
 
 class Month extends Component {
   static propTypes = {
+    disabledDates: React.PropTypes.array,
+    enabledDates: React.PropTypes.array,
     locale: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.object
@@ -27,6 +29,20 @@ class Month extends Component {
     if (this.props.onDayClick) this.props.onDayClick(day);
   };
 
+  isDayDisabled (date) {
+    const {minDate, maxDate, enabledDates, disabledDates} = this.props;
+    return time.dateOutOfRange(date, minDate, maxDate)
+        || (enabledDates && enabledDates.length > 0 && !this.findDate(date, enabledDates))
+        || (disabledDates && disabledDates.length > 0 && this.findDate(date, disabledDates));
+  }
+
+  findDate (comparisonDate, dates){
+    for (const date of dates){
+        if (comparisonDate.getTime() === date.getTime()) return true;
+    }
+    return false;
+  }
+
   renderWeeks () {
     const days = utils.range(0, 7).map(d => time.getDayOfWeekLetter(d, this.props.locale));
     const source = (this.props.sundayFirstDayOfWeek) ? days : [...days.slice(1), days[0]];
@@ -36,7 +52,7 @@ class Month extends Component {
   renderDays () {
     return utils.range(1, time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
       const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
-      const disabled = time.dateOutOfRange(date, this.props.minDate, this.props.maxDate);
+      const disabled = this.isDayDisabled(date);
 
       return (
         <CalendarDay

components/date_picker/DatePicker.js

@@ -18,6 +18,8 @@ const factory = (Input, DatePickerDialog) => {
       autoOk: PropTypes.bool,
       cancelLabel: PropTypes.string,
       className: PropTypes.string,
+      disabledDates: React.PropTypes.array,
+      enabledDates: React.PropTypes.array,
       error: PropTypes.string,
       icon: PropTypes.oneOfType([
         PropTypes.string,
@@ -105,7 +107,7 @@ const factory = (Input, DatePickerDialog) => {
 
     render () {
       const { active, onDismiss,// eslint-disable-line
-        autoOk, cancelLabel, inputClassName, inputFormat, locale, maxDate, minDate,
+        autoOk, cancelLabel, enabledDates, disabledDates, inputClassName, inputFormat, locale, maxDate, minDate,
         okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
         ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
@@ -134,6 +136,8 @@ const factory = (Input, DatePickerDialog) => {
             autoOk={autoOk}
             cancelLabel={cancelLabel}
             className={this.props.className}
+            disabledDates={disabledDates}
+            enabledDates={enabledDates}
             locale={locale}
             maxDate={maxDate}
             minDate={minDate}

components/date_picker/DatePickerDialog.js

@@ -9,6 +9,8 @@ const factory = (Dialog, Calendar) => {
       autoOk: PropTypes.bool,
       cancelLabel: PropTypes.string,
       className: PropTypes.string,
+      disabledDates: PropTypes.array,
+      enabledDates: PropTypes.array,
       locale: React.PropTypes.oneOfType([
         React.PropTypes.string,
         React.PropTypes.object
@@ -119,7 +121,9 @@ const factory = (Dialog, Calendar) => {
 
           <div className={theme.calendarWrapper}>
             <Calendar
+              disabledDates={this.props.disabledDates}
               display={this.state.display}
+              enabledDates={this.props.enabledDates}
               handleSelect={this.handleSelect}
               maxDate={this.props.maxDate}
               minDate={this.props.minDate}
@@ -127,7 +131,7 @@ const factory = (Dialog, Calendar) => {
               selectedDate={this.state.date}
               theme={this.props.theme}
               locale={this.props.locale}
-              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} />
+              sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}/>
           </div>
         </Dialog>
       );

components/date_picker/readme.md

@@ -49,6 +49,8 @@ If you want to provide a theme via context, the component key is `RTDatePicker`.
 | `active`        | `Boolean`       | `false`       | Allows to control if the picker should be shown from outside. Beware you should update the prop when the Dialog is closed. |
 | `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.|
+| `disabledDates`     | `Array`        |               | An array of date objects which will be disabled in the calendar. All other dates will be enabled.|
+| `enabledDates`     | `Array`        |               | An array of date objects which will be enabled in the calendar. All other dates will be disabled.|
 | `inputClassName`| `String`        |               | This class will be applied to `Input` component of `DatePicker`. |
 | `inputFormat`   | `Function`      |               | Function to format the date displayed on the input. |
 | `label`         | `String`        |               | The text string to use for the floating label element in the input component.|

spec/components/pickers.js

@@ -8,6 +8,9 @@ const min_datetime = new Date(new Date(datetime).setDate(8));
 const max_datetime = new Date(new Date(datetime).setDate(24));
 datetime.setHours(17);
 datetime.setMinutes(28);
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+const enabledDisabledDates = [new Date(today.getTime()), new Date(today.setDate(today.getDate() - 1))];
 
 class PickersTest extends React.Component {
   state = {
@@ -91,6 +94,20 @@ class PickersTest extends React.Component {
           value={this.state.date4}
         />
 
+        <DatePicker
+          label='Date picker with enabled dates'
+          onChange={this.handleChange.bind(this, 'date5')}
+          enabledDates={enabledDisabledDates}
+          value={this.state.date5}
+        />
+
+        <DatePicker
+          label='Date picker with disabled dates'
+          onChange={this.handleChange.bind(this, 'date6')}
+          disabledDates={enabledDisabledDates}
+          value={this.state.date6}
+        />
+
         <TimePicker
           label='Start time'
           onChange={this.handleChange.bind(this, 'time1')}