Skip to content

Adding 'multiple' selection type #84

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dorthwein wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Adding 'multiple' selection type #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d13fbfd
update
dorthwein Oct 22, 2015
d1178b0
update
dorthwein Oct 22, 2015
5745646
correcting date format for mutliple selection to save dates as YYYY-M…
dorthwein Oct 23, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 36 additions & 4 deletions dist/DateRangePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {}

Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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();
}
Expand All @@ -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),
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -537,6 +568,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({
firstOfWeek: firstOfWeek,
hideSelection: hideSelection,
highlightedDate: highlightedDate,
highlightedDates: highlightedDates,
highlightedRange: highlightedRange,
index: index,
key: key,
Expand Down
7 changes: 5 additions & 2 deletions dist/calendar/CalendarMonth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,19 +65,20 @@ 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) {
var _props = this.props;
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);

Expand All @@ -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;

Expand Down
41 changes: 40 additions & 1 deletion example/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div>
<RangePicker {...this.props} onSelect={this.handleSelect} value={this.state.value} />
<div>
{this.state.value}
</div>
</div>
);
},
});


var mainCodeSnippet = fs.readFileSync(__dirname + '/code-snippets/main.jsx', 'utf8');

Expand Down Expand Up @@ -148,6 +176,7 @@ const Index = React.createClass({
value={moment.range(initialStart, initialEnd)}
showLegend={true}
/>

<CodeSnippet language="javascript">
{processCodeSnippet(mainCodeSnippet)}
</CodeSnippet>
Expand All @@ -158,7 +187,6 @@ const Index = React.createClass({

<div className="examples">
<h2>Examples</h2>

<div className="example">
<h4>Range with no date states</h4>
<DatePickerRange
Expand All @@ -183,6 +211,17 @@ const Index = React.createClass({
selectionType="single"
minimumDate={new Date()} />
</div>

<div className="example">
<h4>Multiple Date Select</h4>
<DatePickerMultiple
numberOfCalendars={2}
selectionType="multiple"
minimumDate={new Date()}
value={['2015-04-14']}
/>
</div>

</div>
</div>

Expand Down
45 changes: 40 additions & 5 deletions src/DateRangePicker.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {}

Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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();
}
Expand All @@ -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),
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -434,6 +467,7 @@ const DateRangePicker = React.createClass({
enabledRange,
hideSelection,
highlightedDate,
highlightedDates,
highlightedRange
} = this.state;

Expand Down Expand Up @@ -477,6 +511,7 @@ const DateRangePicker = React.createClass({
firstOfWeek,
hideSelection,
highlightedDate,
highlightedDates,
highlightedRange,
index,
key,
Expand Down
9 changes: 7 additions & 2 deletions src/calendar/CalendarMonth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;

Expand Down