react-day-picker:在navbarElement中设置日期

Question

我有一个使用react-day-picker组件的组件。我不想有一个可以分别增加或减少年份和月份的日期选择器。因此，我已经覆盖了navbarElement (如您在最后一行中所看到的)。在箭头函数handleNextYearClick中，年份应增加1。但是如何从父组件DayPicker访问和设置date。我只能调用onNextClick，它只会增加month+1。

export interface IDatePickerNavbarProps {
    date?: Date,
    nextMonth?: Date,
    previousMonth?: Date,
    localeUtils?: any,
    locale?: string,
    onNextClick?: () => {}
}

export interface IDatePickerNavbarState {

}

class DatePickerNavBar extends Component<IDatePickerNavbarProps, IDatePickerNavbarState> {

    constructor(props: IDatePickerNavbarProps) {
        super(props);
    }

    handleNextMonthClick = (event: React.MouseEvent<HTMLElement>) => {
        this.props.onNextClick();
    }

    handleNextYearClick = (event: React.MouseEvent<HTMLElement>) => {
        // How to set the new date => current date + 1 year
        // I am only able to call this.props.onNextClick() but that does 
        // +1 only month count
    }

    render() {
        return (
            <div className={Styles.DayPickerSelectBox}>
                <div className={Styles.DayPickerNavbarYear}>
                    year:
                    <span>last</span>  -  <span onClick={this.handleNextYearClick}>next</span>
                </div>
                <div className={Styles.DayPickerNavbarMonth}>
                    month:
                    <span>last</span>  -  <span onClick={this.handleNextMonthClick}>next</span>
                </div>
            </div>
        );
    }
}

..。这是我在主要日期选择器组件的render()方法中的代码...

<DayPicker navbarElement={<DatePickerNavBar />} captionElement={<DatePickerCaption />} />

不要因为打字符号而感到不安。

Answer 1

可悲的是，当前月份它并未公开给navbarElement

http://react-day-picker.js.org/api/DayPicker#navbarElement

它有previousMonth tough :)

在下一个版本中将添加month属性：https://github.com/gpbl/react-day-picker/pull/552

navbarElement={
  (month) => <DatePickerNavBar currentMonth={month} />
}

Answer 2

这里也有同样的问题。即使有了新的month属性，我仍然不能在导航栏中设置我想要的日期(比如year + 1)。将setMonth()属性注入到导航栏中可能是个好主意。