reactjs - 使用 DateRangePicker 阻止特定月份中的某一天

Question

使用 react-dates 中的 DateRangePicker ，我希望禁用星期一，但仅限于七月和八月。 React 对我来说是新的，我不知道如何开始解决这个问题。

该文档有 blockedDays prop，但我不清楚应该如何将它用于我的特定情况。

如何访问当前显示的月份以及如何随后阻止星期一？

对于那些希望查看我的代码的人，我制作了 gist .

Answer 1

您可以使用 isDayBlocked 属性来实现此目的。

此 Prop 是一个函数回调，它将向您发送 moment date ，并要求您发回一个 bool 值，true 表示该天被阻止，false 表示相反。

根据moment documentation ，以下是您如何知道是否应该阻止您的一天的方法:

isDayBlocked = momentDate => {
    if (momentDate.format('ddd') === 'Mon' && ['Jul', 'Aug'].includes(momentDate.format('MMM')) return true

    return false
}

以下条件也适用(请参阅上面的文档链接):

momentDate.format('d') === 0 && [6, 7].includes(momentDate.format('M')

简短语法:

isDayBlocked = momentDate => momentDate.format('d') === 0 && [6, 7].includes(momentDate.format('M')

这是选择器:

<DateRangePicker
    isDayBlocked={this.isDayBlocked}
    // ... your other props
/>

---

我想我找到了。在您给我的代码中，您声明了 isDayBlocked 属性两次:

            isDayBlocked={day1 => this.state.disabledDates.some(day2 => isSameDay(day1, day2))} //First time
            startDateId="datePickerStart"
            endDateId="datePickerEnd"
            onDatesChange={this.onDatesChange}
            onFocusChange={this.onFocusChange}
            focusedInput={focusedInput}
            startDate={startDate}
            endDate={endDate}
            minimumNights={minimumNights}
            isOutsideRange={condition}
            isDayBlocked = {momentDate => momentDate.format('d') === 0 } // Second one

您可以将它们合并到一个函数中，如我的第一段代码所示，并将两个条件放入其中:

isDayBlocked = momentDate => {
    if (momentDate.format('ddd') === 'Mon' && ['Jul', 'Aug'].includes(momentDate.format('MMM')) return true

    if(this.state.disabledDates.some(day2 => isSameDay(day1, day2))) return true

    return false
}

根据您的评论，您有 2 个解决方案。

将要测试的值转换为字符串:

momentDate => momentDate.format('d') === '0' && ['6','7'].includes(momentDate.format('M')

或者使用非严格运算符:

momentDate => momentDate.format('d') == 0 && ['6', '7'].includes(momentDate.format('M')