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

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

0 голосов
/ 10 января 2019

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

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

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

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

1 Ответ

0 голосов
/ 10 января 2019

Вы можете достичь этого, используя 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')
...