1

我有一个使用该组件的react-day-picker组件。我不想有一个可以单独增加或减少年份和月份的日期选择器。所以我已经覆盖了navbarElement（你可以在最后一行看到）。在箭头函数handleNextYearClick中，年份应该增加 1。但是我如何date从父 Component访问和设置DayPicker。我只能打电话onNextClick，这只会增加月份+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 />} />

不要对打字稿符号感到不安。

4

2 回答 2

1

可悲的是，当月它没有暴露于navbarElement：

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

它previousMonth很难:)

month下一个版本将添加一个道具： https ://github.com/gpbl/react-day-picker/pull/552

navbarElement={
  (month) => <DatePickerNavBar currentMonth={month} />
}
于 2017-11-15T23:00:18.617 回答
0

这里同样的问题。即使有了新的month道具，我仍然无法从导航栏中将日期设置为我想要的日期（设置为 year + 1 之类的东西）。将 setMonth() 属性注入导航栏可能是个好主意。

于 2022-02-08T08:18:41.510 回答