2

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) }}

                    />
Lucy
  • 31
  • 2
  • What behavior is the code above exhibiting? – Matt Dec 27 '19 at 22:40
  • currently it just does what it did before, which is show all the days disabled except monday, due to disabledDays, so still on top of all this behavior only mondays will be enabled in that 8 week range as well – Lucy Dec 27 '19 at 22:46

0 Answers0