Shadcn Calendar fix - working

[allreddv]

Just thought I would share since some of the posts here helped me figure this out. I was trying to use the Calendar component of Shadcn UI which is built on react-day-picker but found that it would not work with safari, the popup for the date picker would not open. In my quest to fix I tried updating react-day-picker and it worked for opening the date picker in all browsers except completely broke the UI CSS. and was a mess. It took me quite a while to get to where I wanted, but finally did. I will attach the code that is working for my use and a screen shot of how it looks, I needed past dates disabled since it is being used for reservations, but I marked where this is easily removed.

Also to note, I think the showOutSideDays might be broke in version 9, it should be set to false by default, but wasn't for me and even setting it to false doesn't seem to do anything, the best I could do was set it to true and then stylize it, I have mine appearing opacity-50, but you could change this to be hidden if you don't want them appearing.

Just make sure after you install the shadcn calendar component you then upgrade react-date-picker to version 9

[MohammedQureshi]

Can you please provide this as a code snippet so people can use it easier :)

[gpbl]

For users of the Shadcn library who want to use the latest DayPicker, there’s also a great implementation by @flixlix:

https://date-picker.luca-felix.com