如何自定义反应日期中的标题月份和年份

Question

please simple code that same this image

Mycode

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}
                  />

this is result this my code 我要添加月份和年份选择框与此图像相同 但是我不知道如何解决。

Answer 1

您需要使用renderMonthElement属性

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

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

您可以在airbnb的github https://github.com/airbnb/react-dates/blob/master/stories/DayPickerSingleDateController.js

中看到一个示例

DayPickerSingleDateControllerWrapper的天窗。