onesine / react-tailwindcss-datepicker

Modern date range picker component for React using Tailwind 3 and dayjs. Alternative to Litepie Datepicker.
https://react-tailwindcss-datepicker.vercel.app/
MIT License
509 stars 149 forks source link

Using Datepicker in modal/dialog #166

Open giero opened 1 year ago

giero commented 1 year ago

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

image

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 commented 1 year ago

+1

robmarshall commented 1 year ago

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

ziaulrehman40 commented 7 months ago

not related to #12 , and this is needed badly

ian-vc commented 3 weeks ago

+1, any solution for this yet?

brianantonelli commented 3 weeks ago

+1

GuilhermeCamillo commented 2 weeks ago

image

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