Блокировка дня недели в течение определенного месяца с помощью DateRangePicker

Question

С использованием DateRangePicker Из дат реагирования я хочу отключить понедельники, но только в июле и августе. Реакт для меня новичок, и я не знаю, как начать решать эту проблему.

Документация содержит реквизиты заблокированных дней, но мне не ясно, как мне использовать ее для моего конкретного случая.

Как я могу получить доступ к текущему месяцу и как впоследствии заблокировать понедельники?

Для тех, кто хочет увидеть мой код, я сделал суть.

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