reactjs - 带有禁用日期的 ReactJS 日期范围选择器 - Rsuite

Question

我正在为我的 ReactJS 项目寻找解决方案。在属性页面中，我想显示具有属性可用性的日期范围选择器。通过使用 Postman 运行查询，我可以使用以下格式从日历中获得可用性，尽管我可以操作数组以满足日期范围选择器的要求。

如何在日期范围选择器内显示被阻止的日期，以便它们不可点击。我已经尝试过使用 rsuite 和 storybook 的 DateRangePicker，但我没有运气。对于 rsuite，数据应具有以下格式：

Answer 1

我设法做到这一点的方法是从 API 获取数据。以 DateRangePicker 可以通过函数导入它的方式进行操作和语法。

axios(config)
            .then(function (response) {
                //console.log(JSON.stringify(response.data));
                calendar= response.data.calendar;
                console.log(calendar);

                var highlighted = [];
                var disabled_days=[];
                    for(var i=0;i<calendar.length;i++) {
                        var item = calendar[i];
                        if(item.status === 'available') {
                            highlighted.push(new Date(item.date));
                            //console.log(item.date);
                        }
                        else{
                            disabled_days.push(new Date(item.date));
                        }
                    };

                modifiers = {
                    disabled: disabled_days,
                    highlight: highlighted 
                }
                self.setState({
                    modifiers: modifiers})
                    //console.log(modifiers);
                })
            .catch(function (error) {
                console.log(error);
            });

然后我使用包'react-calendar'并将其导入我的节点项目。

npm i 'react-calendar' --save

然后我使用组件日历，因为我已通过以下命令导入它：

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;

Answer 2

这取决于您决定使用的日期范围选择器（或者如果您自己编写） - 例如，快速查看此组件的API 会告诉您它有一个 disabledDates: Date[] 属性，您可以使用它来禁用某些日期。