Enable disabling of certain dates #221
Conversation
|
i couldn't get the build to work however |
demo/src/components/Main.js
Outdated
| @@ -72,6 +72,13 @@ export default class Main extends Component { | |||
| key: 'selection', | |||
| }, | |||
| }, | |||
| dateRangeWithDisabled: { | |||
| selection: { | |||
| startDate: new Date(new Date().getTime() + 24 * 60 * 60 * 1000), | |||
There was a problem hiding this comment.
You can use date utils
addDays(new Date(), 3)
src/components/Calendar.js
Outdated
| @@ -116,7 +116,7 @@ class Calendar extends PureComponent { | |||
| setTimeout(() => this.focusToDate(this.state.focusedDate), 1); | |||
| } | |||
| } | |||
| componentWillReceiveProps(nextProps) { | |||
| UNSAFE_componentWillReceiveProps(nextProps) { | |||
There was a problem hiding this comment.
This will break compatibility of older react versions. It's better to remove for a while.
src/components/DateRange.js
Outdated
| // reverse dates if startDate before endDate | ||
| let hasBeenReversed = false; |
There was a problem hiding this comment.
instead of keeping a bool for hasBeenReversed, can you expose a variable like below:
let isStartDateSelected = focusedRange[1] === 0;
// then
if (isBefore(endDate, startDate)) {
isStartDateSelected = !isStartDateSelected;
[startDate, endDate] = [endDate, startDate]; [startDate, endDate] = [endDate, startDate];
}
}
src/components/DateRange.js
Outdated
| } else { | ||
| const maxDate = new Date(Math.max.apply(null, inValidDatesWithinRange)); | ||
| endDate = new Date(maxDate.getTime() - 24 * 60 * 60 * 1000); | ||
| } |
There was a problem hiding this comment.
It's can be cleaner:
if (isStartDateSelected) {
startDate = addDays(max(disabledDates), 1);
} else {
endDate = addDays(min(disabledDates), -1);
}There was a problem hiding this comment.
I've noticed that this method has some problems. It fails when the first selected date is inbetween two invalid dates.
src/components/DateRange.js
Outdated
| @@ -81,14 +102,14 @@ class DateRange extends Component { | |||
| this.props.onRangeFocusChange && this.props.onRangeFocusChange(focusedRange); | |||
| } | |||
| updatePreview(val) { | |||
| if (!val) { | |||
| if (!val || !val.wasValid) { | |||
There was a problem hiding this comment.
It should still show the preview because when a user clicks the date, It will select the date. Can you remove the preventing of preview disabling?
|
should be ok now |
Types of changes
Description
disabledDatesprops which holds an array of dates to be disabled. These days will be rendered with the disabled props.