Question

我在我的应用程序中使用react-dates组件。我想屏蔽几天以在日历中显示假期，而假期在日历中显示，但我无法选择它。我们可以在react-dates组件中选择禁止日期吗？

这是我的组件 `

<SingleDatePicker
 date={startDate}
 weekDayFormat="ddd"
 initialVisibleMonth={() => moment(initialValues)}
 onNextMonthClick={this.nextMonthClick}
 onDateChange={this.onDateChange}
 onFocusChange={(focusedInput) =>  onFocusChange(focusedInput)}
 isDayHighlighted={day1 => this.returnDates().some(day2 => isSameDay(day1, day2))}
isDayBlocked={day1 => this.returnDates().some(day2 => isSameDay(day1, day2))}
/>

`

这是我突出显示和阻止日期的功能

returnDates = () =>{
    const { filteredList } = this.props;
    let calendarEventDates = [];
        filteredList && filteredList.eventDates && filteredList.eventDates.length > 0  && filteredList.events.map(event => {
            let eventDate = moment(event.startDate);
            if(!event.isHoliday){ calendarEventDates.push(eventDate); }
            else{ calendarEventDates.push(eventDate); }
        });
        return calendarEventDates;
}

Answer 1

您可以使用renderDayContents修改其内容，

并为其分配功能

renderDayContents={renderDay}

并从中返回要应用的样式。

renderDay(day) {
    const holidayColor = this.getHolidayColor(day);

    return (
        <div style={{ backgroundColor: holidayColor ? holidayColor : 'white', height: '100%', color: 'black' }}>
        <span>{day.format('D')}</span>
    </div>
    );
}

以下是相关的issue

在反应日期组件中选择冻结日期选项

1 个答案: