ReactJS Ant Design - 单击按钮打开 DatePicker

Question

我正在使用 ReactJS 的 ant 设计框架，我试图找到一个解决方案来在按钮单击时打开DatePicker，但是这似乎不适用于框架组件，我尝试使用第三方 DatePicker，但它不能很好地与它。

我的要求是有一个简单的输入，旁边会有一个按钮，点击按钮 DatePicker 应该弹出..

这是我未完成的演示

如果有人研究过此类解决方案，请提供帮助。

谢谢。

Answer 1

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}>