Using Datepicker in modal/dialog

[giero]

trafficstars

Hello.

is there any way to use Datepicker in modal/dialog/popover/etc such a way it will be above the container it's placed in? By default it looks like this:

https://codesandbox.io/s/happy-mopsa-8r4sgj

In this case Datepicker dropdown should be over the modal container to show all its content.

I will be grateful for every idea how to do this :)

P.S. I know there's overflow-hidden in Dialog.Panel class - I actually need this modal to be scrollable on y-axis overflow

[wanasak]

+1

[robmarshall]

This may be related to this issue: https://github.com/onesine/react-tailwindcss-datepicker/issues/12

[ziaulrehman40]

not related to #12 , and this is needed badly

[ian-vc]

+1, any solution for this yet?

[brianantonelli]

+1

[GuilhermeCamillo]

Hello, I made some changes to be able to use it in modals; however, I removed the icon. But this is easy to solve by just creating a custom component. Here is how I did it:

<Datepicker i18n="pt-BR" displayFormat="DD/MM/YYYY" primaryColor={"blue"} useRange={false} asSingle={true} value={date} onChange={handleValueChange} containerClassName="z-30" toggleClassName="hidden" />

Just added containerClassName and toggleClassName

[bredelman]

+1

[onesine]

Hi there, Sorry for the late reply

You can solve this problem by using the containerClassName property.

containerClassName ="relative w-full z-30"

Or

containerClassName ={oldClass => `${oldClass} z-30`}

Thanks to @GuilhermeCamillo for this suggestion