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

【问题标题】：ReactJS Date Range Picker with disabled dates - Rsuite带有禁用日期的 ReactJS 日期范围选择器 - Rsuite
【发布时间】：2021-10-08 18:35:11
【问题描述】：

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

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

【问题讨论】：

标签： reactjs rsuite react-daterange-picker

【解决方案1】：

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

【讨论】：

是的，但是这个数组的语法是什么？数据导入这个数组的方式？应该是 ["2018-01-01","2018-01-05",....]？应该是 [{year:"2018",month:"01",day:"01"},{year:"2018",month:"01",day:"02"},....]？没有任何例子。
另外，如果你可以检查包“react-nice-dates”reactnicedates.hernansartorio.com
@Filippos 它是一个 Javascript Date 对象数组（这就是类型符号 Date[] 的含义）。您需要获取 API 数据并从中创建日期，方法是自己解析字符串或使用 date-fns、Day.js、MomentJS 等库。
@Filippos react-nice-dates 使用了与我所描述的类似的想法，请在“自定义天数”下的 API docs 中阅读它 - 他们甚至在文档！
谢谢！我成功地做到了。虽然现在我面临另一个问题。主要是 CORS。

【解决方案2】：

我设法做到这一点的方法是从 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;

【讨论】：