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