Range and Multi selection modes

lib/src/DatePicker/Calendar.jsx

@@ -16,7 +16,7 @@ import withUtils from '../_shared/WithUtils';
 /* eslint-disable no-unused-expressions */
 export class Calendar extends Component {
   static propTypes = {
-    date: PropTypes.object.isRequired,
+    date: DomainPropTypes.dateRange.isRequired,
     minDate: DomainPropTypes.date,
     maxDate: DomainPropTypes.date,
     classes: PropTypes.object.isRequired,
@@ -30,6 +30,8 @@ export class Calendar extends Component {
     shouldDisableDate: PropTypes.func,
     utils: PropTypes.object.isRequired,
     allowKeyboardControl: PropTypes.bool,
+    multi: PropTypes.bool,
+    range: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -42,18 +44,22 @@ export class Calendar extends Component {
     renderDay: undefined,
     allowKeyboardControl: false,
     shouldDisableDate: () => false,
+    multi: false,
+    range: false,
   };
 
   state = {
     slideDirection: 'left',
-    currentMonth: this.props.utils.getStartOfMonth(this.props.date),
+    currentMonth: this.props.utils.getStartOfMonth(
+      this.props.date.length > 0 ? this.props.date[this.props.date.length - 1] : this.props.utils.date()),
   };
 
   static getDerivedStateFromProps(nextProps, state) {
     if (!nextProps.utils.isEqual(nextProps.date, state.lastDate)) {
       return {
         lastDate: nextProps.date,
-        currentMonth: nextProps.utils.getStartOfMonth(nextProps.date),
+        currentMonth: nextProps.utils.getStartOfMonth(
+          nextProps.date.length > 0 ? nextProps.date[nextProps.date.length - 1] : nextProps.utils.date()),
       };
     }
 
@@ -65,22 +71,45 @@ export class Calendar extends Component {
       date, minDate, maxDate, utils, disableFuture, disablePast,
     } = this.props;
 
-    if (this.shouldDisableDate(date)) {
+    date.forEach(day =>
+      this.shouldDisableDate(day) &&
       this.onDateSelect(findClosestEnabledDate({
-        date,
+        day,
         utils,
         minDate,
         maxDate,
         disablePast,
         disableFuture,
         shouldDisableDate: this.shouldDisableDate,
-      }), false);
-    }
+      }), false)
+    );
   }
 
   onDateSelect = (day, isFinish = true) => {
-    const { date, utils } = this.props;
-    this.props.onChange(utils.mergeDateAndTime(day, date), isFinish);
+    const { date, utils, multi, range } = this.props;
+
+    let newDate = day
+    if (date.length > 0) {
+      newDate = utils.mergeDateAndTime(day, date[0]);
+    }
+
+    if (multi) {
+      let i = date.findIndex(o => utils.isEqual(o, day))
+      if (i === -1) {
+        newDate = date.concat(newDate)
+      } else {
+        newDate = [ ...date ]
+        newDate.splice(i, 1)
+      }
+    } else if (range && date.length === 1) {
+      newDate = utils.isAfter(newDate, date[0])
+        ? [ date[0], newDate ]
+        : [ newDate, date[0] ];
+    } else {
+      newDate = [ newDate ]
+    }
+
+    this.props.onChange(newDate, isFinish);
   };
 
   handleChangeMonth = (newMonth, slideDirection) => {
@@ -184,22 +213,35 @@ export class Calendar extends Component {
   }
 
   renderDays = (week) => {
-    const { date, renderDay, utils } = this.props;
+    const { date, renderDay, utils, range } = this.props;
+    const { hover } = this.state;
 
-    const selectedDate = utils.startOfDay(date);
+    const selectedDate = date.map(utils.startOfDay);
     const currentMonthNumber = utils.getMonth(this.state.currentMonth);
     const now = utils.date();
 
     return week.map((day) => {
       const disabled = this.shouldDisableDate(day);
       const dayInCurrentMonth = utils.getMonth(day) === currentMonthNumber;
 
+      let additionalProps;
+
+      if (range) {
+        additionalProps = {
+          prelighted: date.length === 1 && utils.isBetween(day, date[0], hover),
+          highlighted: date.length > 1 && utils.isBetween(day, date[0], date[1]),
+          leftCap: utils.isEqual(day, Math.min(date[0], date[1] || hover)),
+          rightCap: utils.isEqual(day, Math.max(date[0], date[1] || hover)),
+        }
+      }
+
       let dayComponent = (
         <Day
           current={utils.isSameDay(day, now)}
           hidden={!dayInCurrentMonth}
           disabled={disabled}
-          selected={utils.isSameDay(selectedDate, day)}
+          selected={selectedDate.some(o => utils.isSameDay(o, day))}
+          {...additionalProps}
         >
           {utils.getDayText(day)}
         </Day>
@@ -216,6 +258,7 @@ export class Calendar extends Component {
           dayInCurrentMonth={dayInCurrentMonth}
           disabled={disabled}
           onSelect={this.onDateSelect}
+          onMouseEnter={e => this.setState({ hover: day })}
         >
           {dayComponent}
         </DayWrapper>

lib/src/DatePicker/DatePicker.jsx

@@ -10,7 +10,7 @@ import withUtils from '../_shared/WithUtils';
 
 export class DatePicker extends PureComponent {
   static propTypes = {
-    date: PropTypes.object.isRequired,
+    date: DomainPropTypes.dateRange.isRequired,
     minDate: DomainPropTypes.date,
     maxDate: DomainPropTypes.date,
     onChange: PropTypes.func.isRequired,
@@ -25,6 +25,8 @@ export class DatePicker extends PureComponent {
     utils: PropTypes.object.isRequired,
     shouldDisableDate: PropTypes.func,
     allowKeyboardControl: PropTypes.bool,
+    multi: PropTypes.bool,
+    range: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -40,14 +42,16 @@ export class DatePicker extends PureComponent {
     rightArrowIcon: undefined,
     renderDay: undefined,
     shouldDisableDate: undefined,
+    multi: false,
+    range: false,
   }
 
   state = {
     showYearSelection: this.props.openToYearSelection,
   }
 
   get date() {
-    return this.props.utils.startOfDay(this.props.date);
+    return this.props.date.map(this.props.utils.startOfDay);
   }
 
   get minDate() {
@@ -83,6 +87,8 @@ export class DatePicker extends PureComponent {
       utils,
       shouldDisableDate,
       allowKeyboardControl,
+      multi,
+      range,
     } = this.props;
     const { showYearSelection } = this.state;
 
@@ -93,14 +99,14 @@ export class DatePicker extends PureComponent {
             variant="subheading"
             onClick={this.openYearSelection}
             selected={showYearSelection}
-            label={utils.getYearText(this.date)}
+            label={utils.getYearText(this.date[this.date.length - 1])}
           />
 
           <ToolbarButton
             variant="display1"
             onClick={this.openCalendar}
             selected={!showYearSelection}
-            label={utils.getDatePickerHeaderText(this.date)}
+            label={utils.getDatePickerHeaderText(this.date[this.date.length - 1])}
           />
         </PickerToolbar>
 
@@ -133,6 +139,8 @@ export class DatePicker extends PureComponent {
                 utils={utils}
                 shouldDisableDate={shouldDisableDate}
                 allowKeyboardControl={allowKeyboardControl}
+                multi={multi}
+                range={range}
               />
         }
       </Fragment>

lib/src/DatePicker/DatePickerWrapper.jsx

@@ -26,6 +26,9 @@ export const DatePickerWrapper = (props) => {
     rightArrowIcon,
     shouldDisableDate,
     value,
+    multi,
+    range,
+    formatSeperator,
     ...other
   } = props;
 
@@ -57,6 +60,7 @@ export const DatePickerWrapper = (props) => {
             ref={forwardedRef}
             value={value}
             isAccepted={isAccepted}
+            formatSeperator={formatSeperator}
             {...other}
           >
             <DatePicker
@@ -73,6 +77,8 @@ export const DatePickerWrapper = (props) => {
               renderDay={renderDay}
               rightArrowIcon={rightArrowIcon}
               shouldDisableDate={shouldDisableDate}
+              multi={multi}
+              range={range}
             />
           </ModalWrapper>
           )
@@ -83,7 +89,7 @@ export const DatePickerWrapper = (props) => {
 
 DatePickerWrapper.propTypes = {
   /** Datepicker value */
-  value: DomainPropTypes.date,
+  value: DomainPropTypes.dateRange,
   /** Min selectable date */
   minDate: DomainPropTypes.date,
   /** Max selectable date */
@@ -117,10 +123,16 @@ DatePickerWrapper.propTypes = {
   /** Enables keyboard listener for moving between days in calendar */
   allowKeyboardControl: PropTypes.bool,
   forwardedRef: PropTypes.func,
+  /** Enables selecting multiple dates **/
+  multi: PropTypes.bool,
+  /** Enables selecting a range of dates **/
+  range: PropTypes.bool,
+  /** String to join multiple values **/
+  formatSeperator: PropTypes.string,
 };
 
 DatePickerWrapper.defaultProps = {
-  value: new Date(),
+  value: [ new Date() ],
   format: 'MMMM Do',
   autoOk: false,
   minDate: '1900-01-01',
@@ -137,6 +149,9 @@ DatePickerWrapper.defaultProps = {
   labelFunc: undefined,
   shouldDisableDate: undefined,
   forwardedRef: undefined,
+  multi: false,
+  range: false,
+  formatSeperator: ', ',
 };
 
 export default React.forwardRef((props, ref) => (

lib/src/DatePicker/Day.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import withStyles from '@material-ui/core/styles/withStyles';
 import IconButton from '@material-ui/core/IconButton';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 
 class Day extends PureComponent {
   static propTypes = {
@@ -23,17 +24,18 @@ class Day extends PureComponent {
 
   render() {
     const {
-      children, classes, disabled, hidden, current, selected, ...other
+      children, classes, disabled, hidden, current, selected,
+      prelighted, highlighted, leftCap, rightCap, ...other
     } = this.props;
 
     const className = classnames(classes.day, {
       [classes.hidden]: hidden,
       [classes.current]: current,
-      [classes.selected]: selected,
+      [classes.selected]: selected || highlighted,
       [classes.disabled]: disabled,
     });
 
-    return (
+    const icon = (
       <IconButton
         className={className}
         tabIndex={hidden || disabled ? -1 : 0}
@@ -42,6 +44,21 @@ class Day extends PureComponent {
         <span> {children} </span>
       </IconButton>
     );
+
+    if (highlighted || prelighted) {
+      return (
+        <div className={classnames({
+          [classes.leftCap]: leftCap,
+          [classes.rightCap]: rightCap,
+          [classes.prelighted]: prelighted,
+          [classes.highlighted]: highlighted,
+        })}>
+          {icon}
+        </div>
+      );
+    } else {
+      return icon;
+    }
   }
 }
 
@@ -74,6 +91,20 @@ const styles = theme => ({
     pointerEvents: 'none',
     color: theme.palette.text.hint,
   },
+  prelighted: {
+    backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity),
+  },
+  highlighted: {
+    backgroundColor: theme.palette.primary.main,
+  },
+  leftCap: {
+    borderTopLeftRadius: '50%',
+    borderBottomLeftRadius: '50%',
+  },
+  rightCap: {
+    borderTopRightRadius: '50%',
+    borderBottomRightRadius: '50%',
+  },
 });
 
 export default withStyles(styles, { name: 'MuiPickersDay' })(Day);

lib/src/DatePicker/YearSelection.jsx

@@ -8,7 +8,7 @@ import Year from './Year';
 
 export class YearSelection extends PureComponent {
   static propTypes = {
-    date: PropTypes.shape({}).isRequired,
+    date: DomainPropTypes.dateRange.isRequired,
     minDate: DomainPropTypes.date.isRequired,
     maxDate: DomainPropTypes.date.isRequired,
     classes: PropTypes.object.isRequired,
@@ -30,7 +30,7 @@ export class YearSelection extends PureComponent {
   onYearSelect = (year) => {
     const { date, onChange, utils } = this.props;
 
-    const newDate = utils.setYear(date, year);
+    const newDate = date.map(o => utils.setYear(o, year));
     onChange(newDate);
   }
 
@@ -55,7 +55,7 @@ export class YearSelection extends PureComponent {
     const {
       minDate, maxDate, date, classes, disablePast, disableFuture, utils,
     } = this.props;
-    const currentYear = utils.getYear(date);
+    const currentYear = utils.getYear(date[date.length - 1]);
 
     return (
       <div className={classes.container}>