是否可以将日期选择器设置为仅在我单击日期选择器外部时关闭?关闭日历时,如果选择了日期,alertDate
函数被调用?
代码在这里:https://stackblitz.com/edit/react-o8dm7y https://stackblitz.com/edit/react-o8dm7y
class App extends Component {
constructor() {
super();
this.state = {
selectedDate: '',
arrayDates: []
};
}
handleChangeDate = (date) => {
let newArrayDates = [...this.state.arrayDates]
newArrayDates.push(date)
this.setState({
selectedDate: date,
arrayDates: newArrayDates
})
}
alertDate = () => {
console.log(this.state.selectedDate)
}
render() {
console.log(this.state.arrayDates)
return (
<div>
<DatePicker
selected={this.state.selectedDate}
onChange={this.handleChangeDate}
showTimeSelect
timeFormat="HH:mm"
timeIntervals={15}
dateFormat="MMMM d, yyyy h:mm aa"
timeCaption="time"
placeholderText="Choose date..."
/>
</div>
);
}
}
以下是您的问题的解决方案:
- 您可以设置
shouldCloseOnSelect
to false
仅当在外部单击时才关闭日期选择器。
- 用于通话
alertDate
你可以把它放进去onBlur
打回来。
这是适合您的示例:
class App extends React.Component {
state = {
startDate: new Date()
};
handleChange = date => {
this.setState({
startDate: date
});
};
handleOnBlur = event => {
const date = new Date(event.target.value);
console.log(date);
};
render() {
return (
<DatePicker
key="example9"
selected={this.state.startDate}
onChange={this.handleChange}
shouldCloseOnSelect={false}
onBlur={this.handleOnBlur}
placeholderText="View blur callbacks in console"
/>
);
}
}
希望这可以帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)