diff --git a/README.md b/README.md index f64608fad..c3ed3fad6 100644 --- a/README.md +++ b/README.md @@ -124,6 +124,7 @@ focusedRange(DateRange) | Object | | It defines onRangeFocusChange(DateRange) | Object | | Callback function for focus changes preview(DateRange) | Object | | displays a preview range and overwrite DateRange's default preview. Expected shape: `{ startDate: Date, endDate: Date, color: String }` showPreview(DateRange) | bool | true | visibility of preview +dragSelectionEnabled(Calendar) | bool | true | whether dates can be selected via drag n drop onPreviewChange(DateRange) | Object | | Callback function for preview changes dateDisplayFormat(DateRange) | String | `MMM D, YYYY` | selected range preview formatter. Check out [date-fns's format option](https://date-fns.org/v2.0.0-alpha.7/docs/format) staticRanges(`DefinedRange`, `DateRangePicker`) | Array | [default preDefined ranges](https://github.com/Adphorus/react-date-range/blob/master/src/defaultRanges.js) | - diff --git a/src/components/Calendar.js b/src/components/Calendar.js index 6a818ac7d..7fd5599aa 100644 --- a/src/components/Calendar.js +++ b/src/components/Calendar.js @@ -272,16 +272,26 @@ class Calendar extends PureComponent { ); } onDragSelectionStart(date) { - this.setState({ - drag: { - status: true, - range: { startDate: date, endDate: date }, - disablePreview: true, - }, - }); + const { onChange, dragSelectionEnabled } = this.props; + + if (dragSelectionEnabled) { + this.setState({ + drag: { + status: true, + range: { startDate: date, endDate: date }, + disablePreview: true, + }, + }); + } else { + onChange && onChange(date); + } } + onDragSelectionEnd(date) { - const { updateRange, displayMode, onChange } = this.props; + const { updateRange, displayMode, onChange, dragSelectionEnabled } = this.props; + + if (!dragSelectionEnabled) return; + if (displayMode === 'date' || !this.state.drag.status) { onChange && onChange(date); return; @@ -300,7 +310,7 @@ class Calendar extends PureComponent { } onDragSelectionMove(date) { const { drag } = this.state; - if (!drag.status) return; + if (!drag.status || !this.props.dragSelectionEnabled) return; this.setState({ drag: { status: drag.status, @@ -465,6 +475,7 @@ Calendar.defaultProps = { maxDate: addYears(new Date(), 20), minDate: addYears(new Date(), -100), rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'], + dragSelectionEnabled: true, }; Calendar.propTypes = { @@ -507,6 +518,7 @@ Calendar.propTypes = { direction: PropTypes.oneOf(['vertical', 'horizontal']), navigatorRenderer: PropTypes.func, rangeColors: PropTypes.arrayOf(PropTypes.string), + dragSelectionEnabled: PropTypes.bool, }; export default Calendar;