如何在反应日期中自定义字幕月份和年份

Question

>请与该图像相同的简单代码

我的代码

date = {
onChange: (date, target) => {
console.log(target)
this.setState({
[target]: date
})
}}
const defaultPropsFilterDate = {
numberOfMonths: 1,
showDefaultInputIcon: false,
navPrev: <img src={Icons['icon-arrow-left.svg']} alt='' className='icon' />,
navNext: <img src={Icons['icon-arrow-right.svg']} alt='' className='icon' />,
hideKeyboardShortcutsPanel: true,
isOutsideRange: () => { }
}
<SingleDatePicker id='birth-date'
placeholder='DD/MM/YYYY'
displayFormat='DD/MM/YYYY'
date={filterBirthDate}
onDateChange={date => {
this.date.onChange(date, 'filterBirthDate')
}}
displayFormat="DD/MM/YYYY"
dayAriaLabelFormat="DD/MM/YYYY"
focused={isFocusBirthDate}
onFocusChange={this.date.onFocusStartDate}
{...defaultPropsFilterDate}
/>

这是我的代码的结果 我想添加与此图像相同的月份和年份选择框 但我不知道如何解决它。

Answer 1

你需要使用 renderMonthElement prop

<SingleDatePicker
renderMonthElement={() => <CustomSelect />}
/>

其中，自定义选择是要呈现为自定义标题的元素。只是不要忘记将事件传递给自定义元素，以便从那里修改日期。

你可以在Airbnb的github中看到一个例子 https://github.com/airbnb/react-dates/blob/master/stories/DayPickerSingleDateController.js

查找 DayPickerSingleDateControllerWrapper。