如何动态更改行事历日历项目道具中日期密钥的日期

问题描述 投票:0回答:1

我正在尝试更改道具属性中的日期以响应本机日历。从文档中可以看出,它需要一个日期字符串作为键,然后它需要一个对象数组来显示该特定日期。

这样的事情。

<Agenda
    items: {{
        '2019-10-12': [],
        '2019-10-13': [{}, {}],
        '2019-10-14': [{}],
        '2019-10-15': []
    }}
/>

但是,我不想对日期进行硬编码。我想要显示下周的日期。这是我尝试过的方法

我使用]取得日期>

 new currentDate = new Date();

我将此日期传递到每周项目中以获取我的每周项目对象。下面的函数使用另外两个函数addDaysdateToString正确渲染日期。

const weeklyItems = (date) => {
    const day1 = dateToString(addDays(date, 1));
    const day2 = dateToString(addDays(date, 2));
    const day3 = dateToString(addDays(date, 3));
    const day4 = dateToString(addDays(date, 4));
    const day5 = dateToString(addDays(date, 5));
    const day6 = dateToString(addDays(date, 6));
    const currentDate = dateToString(date);
    return {
        currentDate : [],
        day1: [],
        day2: [],
        day3: [],
        day4: [],
        day5: [],
        day6: []
    }
}

addDaysdateToString是我的帮助函数:

function addDays(date, days) {
    var result = new Date(date);
    result.setDate(result.getDate() + days);
    return result;
}

此功能将日期对象转换为Agenda所需的格式'YYYY-MM-DD'>

function dateToString (date) {
    const newString  = moment(date).format('YYYY-MM-DD');
    return newString.toString()
}

我已经检查过我的日期是否正确,并且都已结帐。我还使用currentDateday6作为minDatemaxDateAgenda道具的对象,它们按预期方式工作。

完成此操作后,我的Agenda现在看起来像这样:

 <Agenda
    minDate = {currentDate}
    maxDate = {day6}
    selected = {currentDate}
    items: {weeklyItems(currentDate)}
    renderEmptyDate={() => {return (<View/>);}}
/>

这使它停止工作。我知道我的weeklyItems中有空数组,但是现在我只是想让日期起作用,不幸的是,它们没有。任何帮助,将不胜感激。

我正在尝试更改道具属性中的日期以响应本机日历。从文档中可以看出,它需要一个日期字符串作为键,然后该键需要一个对象数组来显示......>

尝试这样返回:

return {
    [currentDate] : [],
    [day1]: [],
    ...
}
javascript arrays string react-native react-native-calendars
1个回答
0
投票

尝试这样返回:

© www.soinside.com 2019 - 2024. All rights reserved.