I have a 2-month calendar where I would like the user to be able to select a date from a range of 8 weeks, but only starting from 3 weeks after the current date. For example, if the current date is Monday December 23, 2019, the first open date that the user can select from is Jan. 13 through March 2nd (8 weeks). So the dates Dec 24-Jan 12 should be disabled, and the open range should be Jan 13-Mar 2.
I was thinking something like this but it didn't work:
handleDayClick(day, modifiers = {}) {
const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
const diffDays = Math.round(Math.abs((day - this.state.from) / oneDay));
const range = DateUtils.addDayToRange(day, undefined);
if (diffDays <= 21 , modifiers.disabled) {
const range = DateUtils.addDayToRange(day, this.state);
this.setState(range);
}
else {
this.setState( { selectedDay: modifiers.selected ? undefined : day});
}
DayPicker looks like this: (Only mondays are enabled at the moment)
<DayPicker
onDayClick={this.state.date}
numberOfMonths={2}
selectedDays={this.state.selectedDay}
onDayClick={this.handleDayClick}
formatMonthTitle
disabledDays={[
{ daysOfWeek: [0, 2, 3, 4, 5, 6] }, { before: new Date() }]}
month={this.state.month}
onInteraction={this.handleDaySelect}
onMonthChange={this.handleMonthChange}
modifiers={
{
monday: { daysOfWeek: [1] }
}
}
value={this.date}
onChange={(d) => { this.onChange(d) }}
/>