CODEWITHSUNDEEP
reactjsantddatetimepicker
Phát Nguyễn
Phát Nguyễn

Reputation: 185

Antd DatePicker: Input in extra footer can't change, select or focus

I am working with antd Datepicker and I want custom Datepicker component look like this.

enter image description here

Now, I use prop renderExtraFooter to add custom footer. My input time in footer is other lib (react-datepicker). My problem is here. I can't change, select, focus any input render in extra footer. I want my input time can use (select, change, focus, ...) but I don't know how to do this.

Here is my trying code: https://codesandbox.io/s/antd-custom-antd-12hgbd

I try .blur() antd Datepicker input but still not work.

Any can help me or tell me a lib to custom DatePicker look like picture. Thank for your help.

Upvotes: 2

Views: 2507

Answers (1)

A G
A G

Reputation: 22587

The only solution is kind of an hack & you will need to handle open & closing of the panel via a state variable.

<DatePicker
  showToday={false}
  open={true}
  renderExtraFooter={() => (
    <div onMouseDown={(e) => e.stopPropagation()}>
     <input />
    </div>
  )}
/>

Edit Extra Footer - Input Focus

If you remove the open={true} prop, the input will focus but the picker will close immediately. You need to control the visibility of the panel with the open property.

Upvotes: 3

Related Questions