我正在使用 ReactJS 的 ant 设计框架，我试图找到一个解决方案来在按钮单击时打开DatePicker，但是这对于框架组件似乎是不可能的，我尝试使用第三方 DatePicker 但它不能很好地与它。
我的要求是有一个简单的输入，旁边会有一个按钮，点击按钮 DatePicker 应该弹出..
这是我未完成的演示
如果有人研究过此类解决方案，请提供帮助。
谢谢。
ReactJS Ant Design - 单击按钮打开 DatePicker
IT技术
javascript
reactjs
datepicker
antd
2021-05-18 22:05:40
2个回答
DatePicker有一个open可以设置为boolean值的props。将onClick事件添加到您的按钮，然后您可以切换日期选择器的状态。
我不想显示那个 DatePicker 输入框，并选择日期来填充其他输入字段的值，有什么解决方案吗？
没有我详细说明这个问题的样式部分，您可以使用该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}>
您可以使用openantd Datepicker 中的字段在按钮单击时切换日期选择器。
<DatePicker
open={this.state.openDatePicker}
onOpenChange={this.datePickerStatus}
/>
<Button
type="primary"
style={{ marginLeft: "100px" }}
onClick={this.toggleDatePicker}
>
<Icon type="calendar" theme="outlined" />
</Button>
您可以open使用toggleDatePicker在按钮单击时调用的函数来切换字段：
toggleDatePicker = () => {
this.setState(prevState => ({
openDatePicker: !prevState.openDatePicker
}));
};
您可能还想在点击外部时关闭日期选择器，这可以通过以下方式实现：
hideDatePicker = () => {
this.setState({
openDatePicker: false
});
};
datePickerStatus = status => {
if (!status) {
this.hideDatePicker();
}
};
您可以在此处找到链接的现场示例