[英]react-day-picker: Set date inside navbarElement
I have a component that uses the react-day-picker
component.我有一个使用
react-day-picker
组件的组件。 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).所以我已经覆盖了
navbarElement
(如您在最后一行中所见)。 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
.在箭头 function
handleNextYearClick
中,年份应该增加 1。但是我如何从父组件DayPicker
访问和设置date
。 I can only call onNextClick
which just increases the month+1.我只能调用
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>
);
}
}
... this is my code inside the render()
method in my main date-picker component... ...这是我在主要日期选择器组件中的
render()
方法中的代码...
<DayPicker navbarElement={<DatePickerNavBar />} captionElement={<DatePickerCaption />} />
Do not feel disturbed by the typescript notation.不要对 typescript 表示法感到不安。
Sadly, the current month it is not exposed to navbarElement
:可悲的是,当前月份它没有暴露给
navbarElement
:
http://react-day-picker.js.org/api/DayPicker#navbarElement http://react-day-picker.js.org/api/DayPicker#navbarElement
It has previousMonth
tough:)它有
previousMonth
艰难:)
A month
prop will be added in the next release: https://github.com/gpbl/react-day-picker/pull/552下个版本会增加
month
道具: https://github.com/gpbl/react-day-picker/pull/552
navbarElement={
(month) => <DatePickerNavBar currentMonth={month} />
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.