reactjs - antd 如何隐藏日期选择器的输入框？

Question

我在隐藏 DatePicker 的输入字段时遇到问题。我正在使用这个 DatePicker from antd.我只想显示图标而不是输入框。当有人点击该图标时，它应该会打开日历。

我试着设置 width = 0，但它看起来很丑

<DatePicker open={openDatePicker} style={{width: '0px}} />

有什么建议吗？

Answer 1

您可以使用自定义 css 类来隐藏输入

/* styles.css */
.custom-picker input {
  visibility: hidden;
}

/* picker.jsx */
<DatePicker className={"custom-picker"} />

DatePicker 本质上是一个 Input + Icon + Calendar，也许你应该用一个 Icon 和一个 Calendar 来制作你自己的组件？
像这样:

import { Calendar, Button, Popover, Icon } from "antd";
import { CalendarOutlined } from "@ant-design/icons";

const CustomPicker = () => {
  return (
    <Popover
      content={
        <div style={{ width: 300 }}>
          <Calendar fullscreen={false} />
        </div>
      }
    >
      <Button icon={<CalendarOutlined />} />
    </Popover>
  );
};