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

Question

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

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

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

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

Answer 1

您可以通过使用isDayBlocked道具来实现这一点。

这个道具是一个回调函数，它会向你发送一个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')