В настоящее время я пытаюсь добавить настраиваемый заголовок в свой календарь 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}
/>
Как настроить таргетинг на второй календарь, чтобы добавить настраиваемый заголовок?