ReactJS Ant Design-点击按钮即可打开日期选择器
我正在使用ReactJS的Ant设计框架,我正在尝试找到一种解决方案,以便在单击按钮时打开日期选择器,但框架组件似乎不可能做到这一点,我曾尝试使用第三方日期选择器,但与之不能很好地配合使用。
我的要求是有一个简单的输入,旁边会有一个按钮,点击按钮DatePicker应该弹出.
这是我的unfinished demo
如果有人研究过此类解决方案,请提供帮助。
谢谢。
解决方案
DatePicker
有一个open
可以设置为boolean
值的道具。向按钮添加onClick
事件,然后您可以切换日期选择器的状态。
我不想显示日期选择器输入框,并选择日期在其他输入字段中填充值,有什么解决方案吗?
无需我详细说明此问题的样式部分,您就可以使用onChange
事件来设置另一个input
的值。
constructor(props) {
super(props);
this.state = {
pickerOpen: false,
selectedDate: null
}
}
togglePicker = () => {
this.setState({pickerOpen: !this.state.pickerOpen});
}
handleChange = selectedDate => {
this.setState({selectedDate});
}
const { pickerOpen, selectedDate } = this.state;
<Input value={selectedDate && moment(selectedDate).format('YYYY-MM-DD')}/>
<DatePicker open={pickerOpen} onChange={this.handleChange}/>
<Button onClick={this.togglePicker}>
相关文章