ReactJS Ant Design-点击按钮即可打开日期选择器

2022-04-12 00:00:00 reactjs javascript datepicker antd

我正在使用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}>

相关文章