我试图通过再次单击 react-day-picker-input 元素来隐藏我的日历(默认情况下单击它时它会打开)。为此,当您单击该元素时,我有一个记录真假的状态。问题是,当我再次单击以隐藏它时,它给了我以下错误:
TypeError:calendarNode.hideDayPicker 不是函数
我尝试使用 showOverlay 和 hideDayPicker。我看到了一个与按钮一起使用的代码,但是当您将 onClick 应用于 DayPickerInput 组件时无法获得结果(见下文)。 https://codesandbox.io/s/oqm3p4j9rz
这是我的代码(总结):
onKeyPress = (event) => {
event.preventDefault();
}
dateRestriction = () => {
const date = new Date();
const nutrition_offset = date.getTimezoneOffset() + 240;
date.setMinutes(date.getMinutes() + nutrition_offset);
const year = date.getFullYear();
const month = date.getMonth() + 1;
let day = date.getDate();
if ((date.getDay() === 4) || (date.getDay() === 5)) {
if (date.getDate() < 5) {
day = ('0' + (date.getDate() + 5));
} else {
day = date.getDate() + 5;
}
}
if (date.getDay() === 6) {
if (date.getDate() < 6) {
day = ('0' + (date.getDate() + 4));
} else {
day = date.getDate() + 4;
}
}
if ((date.getDay() === 0) || (date.getDay() === 1) || (date.getDay() === 2) || (date.getDay() === 3)) {
if (date.getDate() < 7) {
day = ('0' + (date.getDate() + 3));
} else {
day = date.getDate() + 3;
}
}
let dateRestricted = this.parseDate_(year + '-' + month + '-' + day);
this.setState({
noDay: dateRestricted,
showCalendar: true
});
this.handleDayPickerInputHide();
}
handleDayPickerInputHide = () => {
const calendarNode = document.getElementsByName("date");
if (this.state.showCalendar === false) {
return;
} else {
calendarNode.hideDayPicker();
this.setState = {
showCalendar: false
}
}
}
render () {
const { selectedDay } = this.state;
return (
<div>
<DateObject
inputProps={
{className: 'dib nav pl2 pointer br3 shadow-1 dropdownButtonDate removeCursor bg-transparent pv1 mt2 typefaceFont dropdownText',
onKeyDown: this.onKeyPress,
onClick: this.dateRestriction,
name: 'date',
required: "required"}
}
value={selectedDay}
onDayChange={this.handleDayChange}
dayPickerProps={{
selectedDays: selectedDay,
disabledDays:
[
new Date(2019, 0, 1),
new Date(2019, 11, 24),
new Date(2019, 11, 25),
new Date(2019, 11, 31),
{
daysOfWeek: [0, 6],
},
{
before: new Date(this.state.noDay)
}]
}}
/>
</div>
)
}
预期: 1. 最初隐藏日历(默认行为) 2. 单击显示日历(默认行为) 3. 再次单击以隐藏日历(需要) 4. 单击外部也隐藏日历(默认行为) 5. 选择日期也隐藏日历(默认行为)
实际结果: 1. 最初隐藏日历(默认行为) 2. 单击显示日历(默认行为) 3. 再次单击以隐藏日历(错误) 4. 单击外部也隐藏日历(默认行为) 5. 选择一个date 也隐藏日历(默认行为)