Как динамически изменить дату для ключа даты в реквизитах элементов для реагирования на родные календари - PullRequest
Новая
       24

Как динамически изменить дату для ключа даты в реквизитах элементов для реагирования на родные календари

0 голосов
/ 12 октября 2019

Я пытаюсь изменить дату в опоре предметов для реагирования на родные календари. Из документов видно, что в качестве ключа требуется строка даты, которая затем требует отображения массива объектов для этой конкретной даты.

Примерно так. 

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

ОднакоЯ не хочу жестко закодировать даты. То, что я хотел бы, чтобы отобразить даты следующей недели. Это тот подход, который я попробовал

Я получаю дату, используя 

 new currentDate = new Date();

Я передаю эту дату в еженедельные элементы, чтобы получить объект для своих еженедельных элементов. Приведенная ниже функция использует две другие функции, называемые addDays и dateToString, для правильного отображения дат. 

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: []
    }
}

addDays и dateToString - мои вспомогательные функции: 

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

Эта функция преобразует объект даты в форму «ГГГГ-ММ-ДД», что требуется для Agenda

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

Я проверил, верны ли мои даты, и все они проверены,Я также использовал currentDate и day6 в качестве своих объектов для реквизитов minDate и maxDate для Agenda, и они работают как положено.

После этого мой Agenda теперь выглядит следующим образомэто: 

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

И это заставляет его перестать работать. Я знаю, что у меня есть пустые массивы в моих еженедельных элементах, но сейчас я просто пытаюсь заставить даты работать, и, к сожалению, это не так. Любая помощь будет оценена.

1 Ответ

2 голосов
/ 12 октября 2019

Я на мобильном телефоне, поэтому я не могу запустить этот код ...

Попробуйте вернуть объект даты следующим образом: 

return {
    [currentDate] : [],
    [day1]: [],
    ...
}

Также вы можете переписать свои weeklyItemsфункции для итерации от 0 до 6 и динамического задания свойств объекта, который будет возвращен.

Чем в вашем компоненте: 

// somewhere in your js
// const dates = weeklyItems(currentDate)
// const minDate = dateToString(date)
// const maxDate = dateToString(addDays(date, 6))

<Agenda
  minDate = {minDate}
  maxDate = {maxDate}
  selected = {minDate}
  items: {dates}
  renderEmptyDate={() => {return (<View/>);}}
/>
...