时间戳

首页 > 解决方案 > 如何在反应日期中自定义标题月份和年份

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

问题描述

请使用与此图像相同的简单代码

我的代码

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

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

标签： reactjsreact-dates

解决方案

您需要使用 renderMonthElement 道具

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

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

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

寻找 DayPickerSingleDateControllerWrapper。

推荐阅读