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

Question

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

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

这是我的未完成的演示

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

谢谢。

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
   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();
  }
};

您可以在此处

找到链接的实例

Answer 3

这里是使用 Ant Design 的 Input 和 Button 以及 Space 组件的解决方案。 在演示中查看更多详细信息单击按钮时打开日期选择器。

import { useState } from 'react';
import { CalendarOutlined } from '@ant-design/icons';
import { Button, DatePicker, Form, Input, Space } from 'antd';

function AbsoluteTimeRange() {
  const [open, setOpen] = useState(false);

  return (
    <Form.Item label="Start time" labelCol={{ span: 24 }} style={{ margin: 0 }}>
      <DatePicker
        open={open}
        showHour
        showMinute
        onChange={(date, dateString) => {
          console.log(date, dateString);
        }}
        style={{ width: 0, border: 'none', padding: 0 }}
        onOpenChange={(open) => setOpen(open)}
      />

      <Space.Compact style={{ width: 'calc(100% - 2px)' }}>
        <Input placeholder="YYYY-MM-DD HH:mm:ss" />
        <Button icon={<CalendarOutlined />} onClick={() => setOpen(true)} />
      </Space.Compact>
    </Form.Item>
  );
}

export default AbsoluteTimeRange;