Enable disabling of certain dates #221
Conversation
|
i couldn't get the build to work however |
demo/src/components/Main.js
Outdated
| }, | ||
| 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
| } | ||
| } | ||
| 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];
}
}| } 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
| } | ||
| 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 |
3 participants
Types of changes
Description
disabledDatesprops which holds an array of dates to be disabled. These days will be rendered with the disabled props.