Средство выбора диапазона дат ReactJS с отключенными датами - Rsuite

Question

Я ищу решение для своего проекта ReactJS. На странице свойств я хочу отобразить средство выбора диапазона дат с доступностью свойства. Запустив запрос с помощью Postman, я получаю доступность из календаря в следующем формате, хотя для меня нет проблем с манипулированием массивом, чтобы соответствовать требованиям для средства выбора диапазона дат.

Как отобразить в средстве выбора диапазона дат заблокированные дни, чтобы на них нельзя было щелкнуть мышью.

Answer 1

Это будет зависеть от выбора диапазона дат, который вы решите использовать (или если вы напишете свой собственный) - например, беглый взгляд на API этого компонента скажет вам, что у него есть свойство disabledDates: Date[], которое вы можете использовать для отключить определенные даты.

Answer 2

Мне удалось это сделать, получив данные из API. Управляется синтаксисом таким образом, чтобы DateRangePicker мог импортировать его через функцию.

Затем я использовал пакет «response-calendar» и импортировал его в свой проект узла.

      npm i 'react-calendar' --save

Затем я использовал компонент Calendar, поскольку импортировал его с помощью следующей команды:

      import Calendar from '../Components/CalendarRangePicker';

...

      <Calendar modifiers={modifiers}/>

...

CalendarRangePicker.js

      import { useState } from 'react';
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';

function CalendarRangePicker(props){

    const [value, onChange] = useState(new Date());
    const dataNotYetFetched = useState();

    // disabled some days until I fetched the data...
    var disabledDates = [
        new Date(2021, 7, 1),
        new Date(2021, 7, 2),
    ];
    //console.log(disabledDates);
    var modifiers = null;
    if(props.modifiers != null) {
        modifiers = props.modifiers;
        console.log(modifiers);
        disabledDates = modifiers.disabled;
    }

    return (
        <div>
        <Calendar
            // Make calendar not viewable for previous months
            minDate={new Date()}
            // Whether to show two months 
            showDoubleView = {false}
            ActiveStartDate = {new Date()}
            returnValue={"range"}
            // settings for the calendar
            onChange={onChange} 
            value={value} 
            selectRange={true} 
            locale="en-US"
            autofocus={false}
            // disabled dates. Got data from channel manager
            tileDisabled={({date, view}) =>
            (view === 'month') && // Block day tiles only
            disabledDates.some(disabledDate =>
            date.getFullYear() === disabledDate.getFullYear() &&
            date.getMonth() === disabledDate.getMonth() &&
            date.getDate() === disabledDate.getDate()
            )}
        />
        </div>
    );
}

export default CalendarRangePicker;