search

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
552 stars 169 forks source link

Datepicker popover style settings. #260

Open WasiHaider279 opened 5 months ago

WasiHaider279 commented 5 months ago

Discussed in https://github.com/onesine/react-tailwindcss-datepicker/discussions/259

Originally posted by **WasiHaider279** June 12, 2024 Hi, First of all let me say awesome work on this date picker. I was wondering if we can change the styling of Datepicker popover . Because you see my website is in the Dark theme not the **DARK MODE** so I wanna make it aligned with the colors of my theme.
Anonymouseyy commented 5 months ago

Hey, I would like this feature as well. As far as I can tell there is no way to style the datepicker popover currently. But I am willing to work on this feature. Great datepicker btw :)

ichsankurnia commented 4 months ago

hi @WasiHaider279, to change the background color and text color on the picker panels, i think you can use this way .tailwind-datepicker > div > div { @apply border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950 !text-red-500 }

<Datepicker useRange={false} asSingle={true} value={value} onChange={(val) => setValue(val)} containerClassName='relative tailwind-datepicker' inputClassName='input inline' />