我正在为 ReactJS 使用 ant 设计框架，我试图找到一个解决方案来在按钮单击时打开 DatePicker，但是这对于框架组件来说似乎是不可能的，我尝试使用第三个派对 DatePicker 但它不能很好地使用它。
我的要求是有一个简单的输入，旁边会有一个按钮，点击按钮 DatePicker 应该弹出..
这是我的unfinished demo
如果有人研究过这样的解决方案，请帮忙。
谢谢。
【问题讨论】：
<Datepicker open={this.state.isDatepickerOpen} />。然后，我们可以在单击按钮时切换此状态
标签： javascript reactjs datepicker antd
DatePicker 有一个 open 属性，您可以将其设置为 boolean 值。将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}>
【讨论】：
DatePicker input box，并选择日期以在其他输入字段中填写值，有什么解决方案吗？这是我的example 谢谢。
React 部分，但是您必须决定如何通过CSS 隐藏默认的DatePicker 字段。请问您为什么要使用自己的输入字段而不是他们提供的输入字段？
您可以使用 antd Datepicker 中的 open 字段来切换按钮单击时的日期选择器。
<DatePicker
open={this.state.openDatePicker}
onOpenChange={this.datePickerStatus}
/>
<Button
type="primary"
style={{ marginLeft: "100px" }}
onClick={this.toggleDatePicker}
>
<Icon type="calendar" theme="outlined" />
</Button>
您可以使用在按钮单击时调用的函数toggleDatePicker 切换open 字段：
toggleDatePicker = () => {
this.setState(prevState => ({
openDatePicker: !prevState.openDatePicker
}));
};
您可能还想在点击外部时关闭日期选择器，这可以通过以下方式实现：
hideDatePicker = () => {
this.setState({
openDatePicker: false
});
};
datePickerStatus = status => {
if (!status) {
this.hideDatePicker();
}
};
您可以找到链接here的实时示例
【讨论】：