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

Question

使用反应日期的DateRangePicker，我希望禁用星期一，但仅限于 7 月和 8 月。React 对我来说是新的，我不知道如何开始解决这个问题。

该文档有一个 blockedDays 道具，但我不清楚我应该如何在我的特定情况下使用它。

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

对于那些希望看到我的代码的人，我已经做了一个要点。

Answer 1

您可以使用

isDayBlocked道具来实现此目的。

这个 prop 是一个函数回调，它会向你发送一个moment日期，并要求你发送一个布尔值，true意味着这一天被阻止，false意味着相反。

根据当前文档，以下是您如何知道您的一天是否应该被阻止：

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