Javascript ReactJS Ant设计-单击按钮打开日期选择器

我正在使用ant design framework for ReactJS，我试图找到一个解决方案，在点击按钮时打开日期选择器，但是这在框架组件中似乎是不可能的，我尝试过使用第三方日期选择器，但它不能很好地工作

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

这是我的

如果有人已经研究过这种解决方案，请提供帮助

---

谢谢

DatePicker

有一个

open

属性，您可以将其设置为

布尔值。在按钮中添加一个
onClick
事件，然后可以切换日期选择器的状态

我不想显示DatePicker输入框，并选择date来填充其他输入字段中的值，有什么解决方案吗

在我不详细说明此问题的样式部分的情况下，您可以使用
onChange
事件设置其他
输入的值

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

构造函数（道具）{
超级（道具）；
此.state={
pickerOpen:错，
selectedDate:空
}
}
切换选择器=（）=>{
this.setState（{pickerOpen:！this.state.pickerOpen}）；
}
handleChange=selectedDate=>{
this.setState（{selectedDate}）；
}
const{pickerOpen，selectedDate}=this.state；
您可以使用antd Datepicker中的
打开
字段在按钮单击时切换日期选择器

<DatePicker
   open={this.state.openDatePicker}
   onOpenChange={this.datePickerStatus}
/>
<Button
   type="primary"
   style={{ marginLeft: "100px" }}
   onClick={this.toggleDatePicker}
>
  <Icon type="calendar" theme="outlined" />
</Button>

您可能还希望在单击外部时关闭日期选择器，这可以通过以下方式实现：

hideDatePicker = () => {
  this.setState({
    openDatePicker: false
  });
};

datePickerStatus = status => {
  if (!status) {
    this.hideDatePicker();
  }
};

您可以找到链接的实时示例
您需要在日期选择器上指定“打开”属性（例如：
。然后，我们可以在每次单击按钮时切换此状态。是的，但我不想显示日期选择器输入框，并选择日期在其他输入字段中填充值，有什么解决方案吗？谢谢。是的，这是可行的，但我不想显示
日期选择器输入框
，并选择日期在其他输入字段中填充值，任何解决方案？这是我的感谢。@iPhonec我已经添加了解决方案的
React
部分，但是您必须决定如何通过
CSS
隐藏默认的
DatePicker
字段。我可以问您为什么要使用自己的输入字段而不是他们提供的输入字段吗？是的，根据要求，他们希望picker作为可选字段，谢谢你的帮助，我可以继续了。干杯。
hideDatePicker = () => {
  this.setState({
    openDatePicker: false
  });
};

datePickerStatus = status => {
  if (!status) {
    this.hideDatePicker();
  }
};