How to custom caption month and year in react-dates

Question

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 I want to add month and year select box same this image But I do not know how to fix it.

What's your question? What's not working? https://stackoverflow.com/help/mcve — imjared, Sep 06 '18 at 17:50
I want to add month and year select box same this image But I do not know how to fix it. — Sa Varee, Sep 06 '18 at 17:58

2JN · Answer 1 · 2021-04-14T17:22:50.137

You need to use the renderMonthElement prop

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

Where your CustomSelect is the element you want to render as the custom caption. Just don't forget to pass in the events to the custom element in order to modify the date from there.

You can see an example in airbnb's github https://github.com/airbnb/react-dates/blob/master/stories/DayPickerSingleDateController.js

Look for the DayPickerSingleDateControllerWrapper.

How to custom caption month and year in react-dates

1 Answers1