ReactJS Ant Design - 单击按钮时打开 DatePicker

Posted 2023-05-07

【中文标题】ReactJS Ant Design - 单击按钮时打开 DatePicker

【英文标题】：ReactJS Ant Design - Open DatePicker on button click

【发布时间】：2019-03-09 02:11:01

【问题描述】：

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

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

这是我的unfinished demo

如果有人研究过这样的解决方案，请帮忙。

谢谢。

【问题讨论】：

您需要在日期选择器上指定“open”属性（例如：<Datepicker open=this.state.isDatepickerOpen />。然后，我们可以在单击按钮时切换此状态

【参考方案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>

【讨论】：

是的，这可行，但我不想显示DatePicker input box，并选择日期以在其他输入字段中填写值，有什么解决方案吗？这是我的example 谢谢。

@iphonic 我已经在您的解决方案中添加了React 部分，但是您必须决定如何通过CSS 隐藏默认的DatePicker 字段。请问您为什么要使用自己的输入字段而不是他们提供的输入字段？

是的，根据要求，他们希望选择器作为可选，感谢您的帮助，我可以继续。干杯。

@iphonic 你能分享你的答案吗......因为我也被这个要求困住了

我能够使用此答案将输入替换为自定义组件。这是我的solution。我所做的是隐藏选择器并在其上绘制一个自定义组件。这将确保正确绘制弹出框。

【参考方案2】：

您可以使用 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的实时示例

【讨论】：

哇，是的，但我不想显示 DatePicker 输入框，并选择日期以在其他输入字段中填充值，有什么解决方案吗？谢谢。