How to hide input field of Date Picker in antd?

Question

I am having a problem in the hiding the input field of DatePicker.I am using this DatePicker from antd. I want to show only the icon and not the input box. When someone clicks on the icon, it should open the calendar.

I tried to set width = 0. but it is looking very ugly

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

Any suggestion?

Answer 1

I used the following approach.

In the react file, I used:

...
const [datePickerOpen, setDatePickerOpen] = useState(false);
...
...
...
return (
  <div>
    <button onClick={() => setDatePickerOpen(true)}>Open</button>
    <DatePicker
      className={classes.datePicker}
      open={datePickerOpen}
      onOpenChange={setDatePickerOpen}
    />
  </div>
);

In the scss file, I used:

.datePicker {
  visibility: hidden;
  height: 0;
  padding: 0;
  width: 0;
  position: absolute;
}

Answer 2

You can use custom css class to hide input

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

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

The DatePicker is essentially an Input + Icon + Calendar, maybe you should make your own component with an Icon and a Calendar?
Something like this:

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