Добавьте настраиваемый заголовок в response-datepicker при использовании нескольких месяцев - PullRequest
1 голос
/ 14 июля 2020

В настоящее время я пытаюсь добавить настраиваемый заголовок в свой календарь response-datepicker. Однако в моем календаре также отображается несколько месяцев, поэтому, когда я использую опцию renderCustomHeader, он добавляет только настраиваемый заголовок к первому отображаемому календарю, а второй календарь заканчивается без заголовка.

пример календаря

Вот как выглядит текущий код:

<DatePicker
        renderCustomHeader={({
            date,
            changeYear,
            changeMonth,
            decreaseMonth,
            increaseMonth,
            prevMonthButtonDisabled,
            nextMonthButtonDisabled
        }) => (
            <div
                style={{
                    margin: 10,
                    display: 'flex',
                    justifyContent: 'center'
                }}
            >
                <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
                    {'<'}
                </button>
                <select
                    value={date.getFullYear()}
                    onChange={({ target: { value } }) => changeYear(value)}
                >
                    {years.map(option => (
                        <option key={option} value={option}>
                            {option}
                        </option>
                    ))}
                </select>
    
                <select
                    value={months[date.getMonth()]}
                    onChange={({ target: { value } }) =>
                        changeMonth(months.indexOf(value))
                    }
                >
                    {months.map(option => (
                        <option key={option} value={option}>
                            {option}
                        </option>
                    ))}
                </select>
    
                <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
                    {'>'}
                </button>
            </div>
        )}
        selected={startDate}
        onChange={ date => onChange(date) }
        renderDayContents={renderDayContents}
        monthsShown={2}
    />

Как настроить таргетинг на второй календарь, чтобы добавить настраиваемый заголовок?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...