I have a component that uses the react-day-picker component. I wan't to have a datepicker where the year and the month can be increased or decreased seperatly.
So I've overwritten the navbarElement (as you can see in the last line). In the arrow function handleNextYearClick the year should be increased by 1. But how can I access and set the date from the parent Component DayPicker. I can only call onNextClick which just increases the 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>
);
}
}
... this is my code inside the render() method in my main date-picker component...
<DayPicker navbarElement={<DatePickerNavBar />} captionElement={<DatePickerCaption />} />
Do not feel disturbed by the typescript notation.
