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

Question

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

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

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

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

Answer 1

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

这个道具是一个函数回调，它会向你发送一个moment date，并要求你发送一个布尔值，true表示当天被阻止，false表示对面

根据 moment documentation，您可以通过以下方式知道您的一天是否应该被屏蔽：

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

    return false
}

以下条件也适用（请参阅上面的文档 link）：

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

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

Block a day of the week during a particular month using DateRangePicker

reactjs

react-dates