New properties 'minDate' & 'maxDate'

Author: soyjavi

components/date_picker/calendar/_config.scss

@@ -8,6 +8,7 @@ $calendar-arrows-font-size: 2 * $unit;
 $calendar-arrows-ripple-duration: 450ms;
 $calendar-year-font-size: 2.4;
 $calendar-day-font-size: 1.3 * $unit;
+$calendar-day-disable-opacity: 0.25;
 $calendar-row-height: 3 * $unit;
 $calendar-day-padding: .2 * $unit;
 $calendar-total-height: $calendar-row-height * 8 + $calendar-day-padding * 12;

components/date_picker/calendar/day.jsx

@@ -5,6 +5,7 @@ import style from './style';
 class Day extends React.Component {
   static propTypes = {
     day: React.PropTypes.number,
+    disabled: React.PropTypes.bool,
     onClick: React.PropTypes.func,
     selectedDate: React.PropTypes.object,
     viewDate: React.PropTypes.object
@@ -26,7 +27,9 @@ class Day extends React.Component {
   }
 
   render () {
-    const className = this.isSelected() ? `${style.day} ${style.active}` : style.day;
+    let className = this.isSelected() ? `${style.day} ${style.active}` : style.day;
+    if (this.props.disabled) className += ` ${style.disabled}`;
+
     return (
       <div className={className} style={this.dayStyle()}>
           <span onClick={this.props.onClick}>

components/date_picker/calendar/index.jsx

@@ -10,6 +10,8 @@ import style from './style';
 class Calendar extends React.Component {
   static propTypes = {
     display: React.PropTypes.oneOf(['months', 'years']),
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
     selectedDate: React.PropTypes.object,
     viewDate: React.PropTypes.object
@@ -98,6 +100,8 @@ class Calendar extends React.Component {
         <CSSTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
           <Month
             key={this.state.viewDate.getMonth()}
+            maxDate={this.props.maxDate}
+            minDate={this.props.minDate}
             viewDate={this.state.viewDate}
             selectedDate={this.props.selectedDate}
             onDayClick={this.handleDayClick} />

components/date_picker/calendar/month.jsx

@@ -5,6 +5,8 @@ import style from './style';
 
 class Month extends React.Component {
   static propTypes = {
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object,
     onDayClick: React.PropTypes.func,
     selectedDate: React.PropTypes.object,
     viewDate: React.PropTypes.object
@@ -22,11 +24,21 @@ class Month extends React.Component {
 
   renderDays () {
     return utils.range(1, utils.time.getDaysInMonth(this.props.viewDate) + 1).map(i => {
+      let active = true;
+
+      if (this.props.minDate || this.props.maxDate) {
+        const date = new Date(this.props.viewDate.getFullYear(), this.props.viewDate.getMonth(), i);
+        if (this.props.minDate && !(date >= this.props.minDate)) active = false;
+        if (this.props.maxDate && !(date <= this.props.maxDate)) active = false;
+        console.log('day', i, date, this.props.minDate, active);
+      }
+
       return (
         <Day
           key={i}
           day={i}
-          onClick={this.handleDayClick.bind(this, i)}
+          disabled={!active}
+          onClick={active ? this.handleDayClick.bind(this, i) : null}
           selectedDate={this.props.selectedDate}
           viewDate={this.props.viewDate}
         />
@@ -35,6 +47,7 @@ class Month extends React.Component {
   }
 
   render () {
+    console.info('max/min', this.props.maxDate, this.props.minDate);
     return (
       <div className={style.month}>
         <span className={style.title}>

components/date_picker/calendar/style.scss

@@ -50,21 +50,19 @@
 .week {
   display: flex;
   height: $calendar-row-height;
+  flex-wrap: wrap;
   font-size: $calendar-day-font-size;
   line-height: $calendar-row-height;
   opacity: .5;
-
-  flex-wrap: wrap;
   > span {
     flex: 0 0 (100% / 7);
   }
 }
 
 .days {
   display: flex;
-  font-size: $calendar-day-font-size;
-
   flex-wrap: wrap;
+  font-size: $calendar-day-font-size;
 }
 
 .day {
@@ -75,17 +73,22 @@
     width: $calendar-row-height;
     height: $calendar-row-height;
     line-height: $calendar-row-height;
-    cursor: pointer;
     border-radius: 50%;
   }
-  &:hover:not(.active) > span {
+  &:hover:not(.active):not(.disabled) > span {
     color: $calendar-primary-contrast-color;
     background: $calendar-primary-hover-color;
   }
   &.active > span {
     color: $calendar-primary-contrast-color;
     background: $calendar-primary-color;
   }
+  &:hover:not(.disabled) > span {
+    cursor: pointer;
+  }
+  &.disabled {
+    opacity: $calendar-day-disable-opacity;
+  }
 }
 
 .month {

components/date_picker/dialog.jsx

@@ -7,6 +7,8 @@ import Dialog from '../dialog';
 class CalendarDialog extends React.Component {
   static propTypes = {
     active: React.PropTypes.bool,
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object,
     onDismiss: React.PropTypes.func,
     onSelect: React.PropTypes.func,
     value: React.PropTypes.object
@@ -61,6 +63,8 @@ class CalendarDialog extends React.Component {
           <div className={style.wrapper}>
             <Calendar
               display={this.state.display}
+              maxDate={this.props.maxDate}
+              minDate={this.props.minDate}
               onChange={this.handleCalendarChange}
               selectedDate={this.state.date} />
           </div>

components/date_picker/index.jsx

@@ -7,6 +7,8 @@ import style from './style';
 
 class DatePicker extends React.Component {
   static propTypes = {
+    maxDate: React.PropTypes.object,
+    minDate: React.PropTypes.object,
     onChange: React.PropTypes.func,
     value: React.PropTypes.object
   };
@@ -32,6 +34,7 @@ class DatePicker extends React.Component {
   render () {
     const { value } = this.props;
     const date = value ? `${value.getDate()} ${time.getFullMonth(value)} ${value.getFullYear()}` : null;
+
     return (
       <div data-toolbox='date-picker'>
         <Input
@@ -44,6 +47,8 @@ class DatePicker extends React.Component {
         />
         <CalendarDialog
           active={this.state.active}
+          maxDate={this.props.maxDate}
+          minDate={this.props.minDate}
           onDismiss={this.handleDismiss}
           onSelect={this.handleSelect}
           value={this.props.value}