html - Changing the default UI of Antd DatePicker component - Stack Overflow

admin管理员组

文章数量:1315296

I want to have a custom icon (not just the suffix icon - to replace the whole UI of the DatePicker), and when I click that icon, I want the DatePicker to open for me to select the date.

const [open, setOpen] = useState(false)
const handleIconClick = () => {
    setOpen(true)
};
    return(
<CalendarOutlined className="calendar-icon" onClick={handleIconClick} />
                    <DatePicker style={{display:'none'}}open={open} onOpenChange={setOpen} />
)

This is what I have tried. The DatePicker component is not displayed as display is set to none and when I click on the icon, the DatePicker open UI will render for quick second and disappear. I suspect this is also because the display is set to none.

Is there anyway I can achieve what I want while using the antd DatePicker or will I have to use the date input html element for this purpose?

I want to have a custom icon (not just the suffix icon - to replace the whole UI of the DatePicker), and when I click that icon, I want the DatePicker to open for me to select the date.

const [open, setOpen] = useState(false)
const handleIconClick = () => {
    setOpen(true)
};
    return(
<CalendarOutlined className="calendar-icon" onClick={handleIconClick} />
                    <DatePicker style={{display:'none'}}open={open} onOpenChange={setOpen} />
)

This is what I have tried. The DatePicker component is not displayed as display is set to none and when I click on the icon, the DatePicker open UI will render for quick second and disappear. I suspect this is also because the display is set to none.

Is there anyway I can achieve what I want while using the antd DatePicker or will I have to use the date input html element for this purpose?

• html
• css
• reactjs
• datepicker
• antd

Share Improve this question Follow asked Jan 30 at 9:50 Upeka FernandoUpeka Fernando 10511 gold badge11 silver badge77 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can set its visibility to hidden from the style prop or through a className.

<DatePicker 
  // className="some-classname-which-sets-visibility-to-hidden" or
  style={{visibility:'hidden'}}
  open={open} 
  onOpenChange={setOpen} 
/>

Example: https://codepen.io/Gabriele-Petrioli/pen/myboyyX?editors=0010

---

Also found a discussion with an example in github: allow opening DatePicker without need for input box

本文标签： htmlChanging the default UI of Antd DatePicker componentStack Overflow