使用多个月份时,向react-datepicker添加自定义标头

Dus*_*ale 6 javascript datepicker reactjs react-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}
    />
Run Code Online (Sandbox Code Playgroud)

如何针对第二个日历添加自定义标题?