织梦狗教程 / 编程问答 / 前端问题 / 正文

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

织梦狗教程前端问题

2022-01-01

ReactJS Ant Design - Open DatePicker on button click(ReactJS Ant Design-点击按钮即可打开日期选择器)

本文介绍了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}>

这篇关于ReactJS Ant Design-点击按钮即可打开日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

react