react-day-picker icon indicating copy to clipboard operation
react-day-picker copied to clipboard

Add an example using tailwind

Open gpbl opened this issue 1 year ago • 4 comments

Some developers are wondering how to use tailwindcss with DayPicker.

@malcolm-kee proposed a solution here:

Repo: https://github.com/malcolm-kee/react-day-picker-tailwind Demo: https://react-day-picker-tailwind.netlify.app/

but we could add it to the documentation.

gpbl avatar Mar 08 '23 19:03 gpbl

Thanks examples @gpbl

ialexanderbrito avatar Mar 21 '23 21:03 ialexanderbrito

@shadcn's UI components library also uses react-day-picker:

https://ui.shadcn.com/docs/components/calendar

vixeven avatar Apr 27 '23 09:04 vixeven

I would also love to get the caption_layout version because the above examples only show the nav buttons but do not select month and year. For whatever reason, I've been struggling with disabling the aria-hidden="true" divs within the calendar forked from shadcn.

Screenshot 2023-11-14 at 16 06 24 Screenshot 2023-11-14 at 16 06 50

tyeetale avatar Nov 14 '23 09:11 tyeetale

Actually nevermind. Again it was a tailwind issue on creating caption labels. Screenshot 2023-11-14 at 16 19 32

tyeetale avatar Nov 14 '23 09:11 tyeetale

Closing this as DayPicker 9 is in beta and comes up with a simplified HTML tree and UI elements: the changes will allow an easier and solid customization via TailwindCSS.

See the example here: https://react-day-picker.js.org/next/using-daypicker/styling#tailwind-css

Try the beta and let me know if it works for you - and if not! Thanks.

gpbl avatar May 31 '24 23:05 gpbl