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

Posted 2023-03-16

【中文标题】带有禁用日期的 ReactJS 日期范围选择器 - Rsuite

【英文标题】：ReactJS Date Range Picker with disabled dates - Rsuite

【发布时间】：2021-10-08 18:35:11

【问题描述】：

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

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

【参考方案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;