diff --git a/dist/DateRangePicker.js b/dist/DateRangePicker.js index d01b85e7..b5c2875d 100644 --- a/dist/DateRangePicker.js +++ b/dist/DateRangePicker.js @@ -56,7 +56,9 @@ var PureRenderMixin = _reactAddons2['default'].addons.PureRenderMixin; var absoluteMinimum = (0, _moment2['default'])(new Date(-8640000000000000 / 2)).startOf('day'); var absoluteMaximum = (0, _moment2['default'])(new Date(8640000000000000 / 2)).startOf('day'); -_reactAddons2['default'].initializeTouchEvents(true); +try { + _reactAddons2['default'].initializeTouchEvents(true); +} catch (err) {} function noop() {} @@ -87,11 +89,12 @@ var DateRangePicker = _reactAddons2['default'].createClass({ onSelectStart: _reactAddons2['default'].PropTypes.func, // triggered when the first date in a range is selected paginationArrowComponent: _reactAddons2['default'].PropTypes.func, selectedLabel: _reactAddons2['default'].PropTypes.string, - selectionType: _reactAddons2['default'].PropTypes.oneOf(['single', 'range']), + selectionType: _reactAddons2['default'].PropTypes.oneOf(['single', 'range', 'multiple']), singleDateRange: _reactAddons2['default'].PropTypes.bool, showLegend: _reactAddons2['default'].PropTypes.bool, stateDefinitions: _reactAddons2['default'].PropTypes.object, - value: _utilsCustomPropTypes2['default'].momentOrMomentRange + value: _reactAddons2['default'].PropTypes.oneOfType([_reactAddons2['default'].PropTypes.array, _utilsCustomPropTypes2['default'].momentOrMomentRange]) + }, getDefaultProps: function getDefaultProps() { @@ -147,17 +150,23 @@ var DateRangePicker = _reactAddons2['default'].createClass({ var year = now.getFullYear(); var month = now.getMonth(); + var selectedMultipleDates = []; if (initialYear && initialMonth) { year = initialYear; month = initialMonth; } + if (value instanceof Array) { + selectedMultipleDates = value.map(function (selectedDate) { + return (0, _moment2['default'])(selectedDate).format('YYYY-MM-DD'); + }); + } if (initialFromValue && value) { if (selectionType === 'single') { year = value.year(); month = value.month(); - } else { + } else if (selectionType === 'range') { year = value.start.year(); month = value.start.month(); } @@ -169,6 +178,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ selectedStartDate: null, highlightStartDate: null, highlightedDate: null, + highlightedDates: selectedMultipleDates, highlightRange: null, hideSelection: false, enabledRange: this.getEnabledRange(this.props), @@ -316,6 +326,10 @@ var DateRangePicker = _reactAddons2['default'].createClass({ this.highlightRange(_moment2['default'].range(date, date)); } } + } else if (selectionType === 'multiple') { + if (!this.isDateDisabled(date) && this.isDateSelectable(date)) { + this.completeMultipleSelection(date); + } } else { if (!this.isDateDisabled(date) && this.isDateSelectable(date)) { this.completeSelection(); @@ -404,6 +418,22 @@ var DateRangePicker = _reactAddons2['default'].createClass({ } }, + completeMultipleSelection: function completeMultipleSelection(momentDate) { + var date = momentDate.format('YYYY-MM-DD'); + + var highlightedDates = this.state.highlightedDates; + var index = highlightedDates.indexOf(date); + + if (index > -1) { + highlightedDates.splice(index, 1); + this.setState({ highlightedDates: highlightedDates }); + } else { + highlightedDates.push(date); + this.setState({ highlightedDates: highlightedDates }); + } + this.props.onSelect(highlightedDates, this.statesForDate(momentDate)); + }, + highlightDate: function highlightDate(date) { this.setState({ highlightedDate: date @@ -495,6 +525,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ var enabledRange = _state2.enabledRange; var hideSelection = _state2.hideSelection; var highlightedDate = _state2.highlightedDate; + var highlightedDates = _state2.highlightedDates; var highlightedRange = _state2.highlightedRange; var monthDate = this.getMonthDate(); @@ -537,6 +568,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ firstOfWeek: firstOfWeek, hideSelection: hideSelection, highlightedDate: highlightedDate, + highlightedDates: highlightedDates, highlightedRange: highlightedRange, index: index, key: key, diff --git a/dist/calendar/CalendarMonth.js b/dist/calendar/CalendarMonth.js index 89bcd2e1..5bf87679 100644 --- a/dist/calendar/CalendarMonth.js +++ b/dist/calendar/CalendarMonth.js @@ -65,7 +65,7 @@ var CalendarMonth = _reactAddons2['default'].createClass({ highlightedRange: _reactAddons2['default'].PropTypes.object, onMonthChange: _reactAddons2['default'].PropTypes.func, onYearChange: _reactAddons2['default'].PropTypes.func, - value: _utilsCustomPropTypes2['default'].momentOrMomentRange + value: _reactAddons2['default'].PropTypes.oneOfType([_reactAddons2['default'].PropTypes.array, _utilsCustomPropTypes2['default'].momentOrMomentRange]) }, renderDay: function renderDay(date, i) { @@ -73,11 +73,12 @@ var CalendarMonth = _reactAddons2['default'].createClass({ var CalendarDate = _props.dateComponent; var value = _props.value; var highlightedDate = _props.highlightedDate; + var highlightedDates = _props.highlightedDates; var highlightedRange = _props.highlightedRange; var hideSelection = _props.hideSelection; var enabledRange = _props.enabledRange; - var props = _objectWithoutProperties(_props, ['dateComponent', 'value', 'highlightedDate', 'highlightedRange', 'hideSelection', 'enabledRange']); + var props = _objectWithoutProperties(_props, ['dateComponent', 'value', 'highlightedDate', 'highlightedDates', 'highlightedRange', 'hideSelection', 'enabledRange']); var d = (0, _moment2['default'])(date); @@ -88,6 +89,8 @@ var CalendarMonth = _reactAddons2['default'].createClass({ if (!hideSelection && value && _moment2['default'].isMoment(value) && value.isSame(d, 'day')) { isSelectedDate = true; + } else if (!hideSelection && highlightedDates.indexOf(d.format('YYYY-MM-DD')) > -1) { + isSelectedDate = true; } else if (!hideSelection && value && (0, _utilsIsMomentRange2['default'])(value) && value.contains(d)) { isInSelectedRange = true; diff --git a/example/index.jsx b/example/index.jsx index 97fbc77e..18f60330 100644 --- a/example/index.jsx +++ b/example/index.jsx @@ -83,6 +83,34 @@ const DatePickerSingle = React.createClass({ }, }); +const DatePickerMultiple = React.createClass({ + getDefaultProps() { + return {value: []} + }, + getInitialState() { + return { + value: this.props.value, + states: null, + }; + }, + + handleSelect(value, states) { + this.setState({value, states}); + }, + + render() { + var string; + return ( +
+ +
+ {this.state.value} +
+
+ ); + }, +}); + var mainCodeSnippet = fs.readFileSync(__dirname + '/code-snippets/main.jsx', 'utf8'); @@ -148,6 +176,7 @@ const Index = React.createClass({ value={moment.range(initialStart, initialEnd)} showLegend={true} /> + {processCodeSnippet(mainCodeSnippet)} @@ -158,7 +187,6 @@ const Index = React.createClass({

Examples

-

Range with no date states

+ +
+

Multiple Date Select

+ +
+
diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx index f28abb0a..4d6436f4 100644 --- a/src/DateRangePicker.jsx +++ b/src/DateRangePicker.jsx @@ -19,7 +19,9 @@ const PureRenderMixin = React.addons.PureRenderMixin; const absoluteMinimum = moment(new Date(-8640000000000000 / 2)).startOf('day'); const absoluteMaximum = moment(new Date(8640000000000000 / 2)).startOf('day'); -React.initializeTouchEvents(true); +try {React.initializeTouchEvents(true); +} catch(err) {} + function noop() {} @@ -49,11 +51,15 @@ const DateRangePicker = React.createClass({ onSelectStart: React.PropTypes.func, // triggered when the first date in a range is selected paginationArrowComponent: React.PropTypes.func, selectedLabel: React.PropTypes.string, - selectionType: React.PropTypes.oneOf(['single', 'range']), + selectionType: React.PropTypes.oneOf(['single', 'range', 'multiple']), singleDateRange: React.PropTypes.bool, showLegend: React.PropTypes.bool, stateDefinitions: React.PropTypes.object, - value: CustomPropTypes.momentOrMomentRange, + value: React.PropTypes.oneOfType([ + React.PropTypes.array, + CustomPropTypes.momentOrMomentRange, + ]) + }, getDefaultProps() { @@ -103,17 +109,23 @@ const DateRangePicker = React.createClass({ let {initialYear, initialMonth, initialFromValue, selectionType, value} = this.props; let year = now.getFullYear(); let month = now.getMonth(); + let selectedMultipleDates = []; if (initialYear && initialMonth) { year = initialYear; month = initialMonth; } + if (value instanceof Array){ + selectedMultipleDates = value.map(function(selectedDate){ + return moment(selectedDate).format('YYYY-MM-DD'); + }); + } if (initialFromValue && value) { if (selectionType === 'single') { year = value.year(); month = value.month(); - } else { + } else if (selectionType === 'range') { year = value.start.year(); month = value.start.month(); } @@ -125,6 +137,7 @@ const DateRangePicker = React.createClass({ selectedStartDate: null, highlightStartDate: null, highlightedDate: null, + highlightedDates: selectedMultipleDates, highlightRange: null, hideSelection: false, enabledRange: this.getEnabledRange(this.props), @@ -264,7 +277,10 @@ const DateRangePicker = React.createClass({ this.highlightRange(moment.range(date, date)); } } - + } else if(selectionType === 'multiple'){ + if (!this.isDateDisabled(date) && this.isDateSelectable(date)) { + this.completeMultipleSelection(date); + } } else { if (!this.isDateDisabled(date) && this.isDateSelectable(date)) { this.completeSelection(); @@ -343,6 +359,23 @@ const DateRangePicker = React.createClass({ } }, + completeMultipleSelection(momentDate) { + var date = momentDate.format('YYYY-MM-DD'); + + var highlightedDates = this.state.highlightedDates; + var index = highlightedDates.indexOf(date); + + if (index > -1) { + highlightedDates.splice(index, 1); + this.setState({highlightedDates: highlightedDates}); + + } else { + highlightedDates.push(date); + this.setState({highlightedDates: highlightedDates}); + } + this.props.onSelect(highlightedDates, this.statesForDate(momentDate)); + }, + highlightDate(date) { this.setState({ highlightedDate: date, @@ -434,6 +467,7 @@ const DateRangePicker = React.createClass({ enabledRange, hideSelection, highlightedDate, + highlightedDates, highlightedRange } = this.state; @@ -477,6 +511,7 @@ const DateRangePicker = React.createClass({ firstOfWeek, hideSelection, highlightedDate, + highlightedDates, highlightedRange, index, key, diff --git a/src/calendar/CalendarMonth.jsx b/src/calendar/CalendarMonth.jsx index 5503f5ab..e28803f8 100644 --- a/src/calendar/CalendarMonth.jsx +++ b/src/calendar/CalendarMonth.jsx @@ -29,11 +29,14 @@ const CalendarMonth = React.createClass({ highlightedRange: React.PropTypes.object, onMonthChange: React.PropTypes.func, onYearChange: React.PropTypes.func, - value: CustomPropTypes.momentOrMomentRange, + value: React.PropTypes.oneOfType([ + React.PropTypes.array, + CustomPropTypes.momentOrMomentRange, + ]) }, renderDay(date, i) { - let {dateComponent: CalendarDate, value, highlightedDate, highlightedRange, hideSelection, enabledRange, ...props} = this.props; + let {dateComponent: CalendarDate, value, highlightedDate, highlightedDates, highlightedRange, hideSelection, enabledRange, ...props} = this.props; let d = moment(date); let isInSelectedRange; @@ -43,6 +46,8 @@ const CalendarMonth = React.createClass({ if (!hideSelection && value && moment.isMoment(value) && value.isSame(d, 'day')) { isSelectedDate = true; + } else if (!hideSelection && highlightedDates.indexOf(d.format('YYYY-MM-DD')) > -1) { + isSelectedDate = true; } else if (!hideSelection && value && isMomentRange(value) && value.contains(d)) { isInSelectedRange = true;