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

Question

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

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.

You can try [this](https://codesandbox.io/s/antd-custom-antd-forked-smu3bg?file=/src/App.js) one too on your CodeSanbox code. — Lalit Fauzdar, Sep 04 '22 at 12:28
Although, I made it work without `e.stopPropagation()` but as suggested in the answer, this works, that too better without my hack — Lalit Fauzdar, Sep 04 '22 at 12:29
Instead of a separate button, you can use ok button of the Ant design's date picker. — Lalit Fauzdar, Sep 04 '22 at 12:30

A G · Accepted Answer · 2022-09-04T12:33:08.767

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

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.

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

1 Answers1