React-Day-Picker-禁用日期并从日期范围中选择

时间:2019-12-27 22:35:25

标签: javascript html reactjs react-day-picker

我有一个2个月的日历,我希望用户能够从8周的范围内选择日期,但只能从当前日期后的3周开始。 例如,如果当前日期是2019年12月23日星期一,则用户可以选择的第一个开放日期是1月13日至3月2日(8周)。 因此应禁用12月24日至1月12日的日期,而开放范围应为1月13日至3月2日。

我在想类似的事情,但是没用:

 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看起来像这样:(目前仅启用星期一)

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

                    />

0 个答案:

没有答案