Question

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

我的要求是输入一个简单的内容，并且旁边会有一个按钮，单击按钮应弹出DatePicker。

这是我的unfinished demo

如果有人在研究这种解决方案，请提供帮助。

谢谢。

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

Answer 2

您可以使用antd Datepicker中的open字段在单击按钮时切换Datepicker。

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

您可以使用按钮单击时调用的功能open来切换toggleDatePicker字段：

toggleDatePicker = () => {
  this.setState(prevState => ({
    openDatePicker: !prevState.openDatePicker
  }));
};

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

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

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

您可以找到链接here的实时示例

ReactJS Ant设计-单击按钮打开DatePicker

2 个答案: