feat(calendar): enhance calendar component with dropdown selector #1680
Conversation
## Support for selecting the year and month using the select component. Related to: shadcn-ui#320 shadcn-ui#546 shadcn-ui#509 shadcn-ui#880 ### Usage: ``` <Calendar initialFocus mode="range" // range | single captionLayout="dropdown-buttons" // Optionally, enables the year and month drop-down selector. // also: dropdown-buttons | dropdown | buttons fromYear={2022} toYear={2023} defaultMonth={date?.from} selected={date} onSelect={setDate} numberOfMonths={2} {...props} /> ``` --- ZEONFUNG, NGAU [email protected] #230713 142000
New York
|
@auzeonfung is attempting to deploy a commit to the shadcn-pro Team on Vercel. A member of the Team first needs to authorize it. |
|
|
please approve it, this need to be fixed ASAP |
|
Awesome job! |
You've reminded me! This is the part I didn't notice, I'll find the time to implement this part. ;) |
|
I see that currently on the Calendar component you can set "captionLayout" to "buttons" or "dropdown" however when configuring "dropdown", the UI is broken:
Does this feature resolve this issue? Thanks |
Yes. |
shadcn
added
enhancement
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hey, this PR has been hanging around quite a while, It's a really cool feature <3 we're all waiting for . |
| row: "flex w-full mt-2", | ||
| cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", | ||
| cell: cn( | ||
| "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent", |
There was a problem hiding this comment.
add h-9 w-9 [otherwise if you set showOutsideDays to false the cells will not show in their proper location]
|
@auzeonfung @shadcn Are conflicts the reason for not merging this PR? |
|
Just one small detail... When u have "new york" selected it changes the width of the calendar... It's just a small thing, but I think it can can be fixed... Screen.Recording.2024-03-06.at.0.59.21.mov |
|
Hey all, We'd really love for this feature to be merged! So bumping this PR! 👍 |
|
Hello @shadcn , There are some code conflicts. Please merge this ASAP. |
|
Hey everyone! |
|
@shadcn team - this is a must add. Can we please get this into build? |
|
To clarify, the usability bug I'm hitting that makes the date selector unbearable is that as you flip through months with different number of days, the calendar height changes and the tap target moves to scroll through months. Then the dialogue closes. To move 5-6 months in advance is painful, and that's for me who uses this every day, let alone new users. I see this is fixed which is why I request change in next build. |
|
Last comment from me - the usability bug I mentioned only happens when the Calendar Dialogue opens ABOVE the input field. When below, scrolling through works perfectly. I'll see if I can persist this on my app to solve the problem. |
Previously, users had to continuously click the previous/next month button to navigate through months, which was not very user-friendly.
In this update, I have added the ability for users to directly specify a year or month through a dropdown selector.
Differences in this change compared to PR #918 :
pnpm testcommand passed.In addition to these changes, this PR also includes appropriate modifications to the project's documentation pages related to the
calendaranddate-pickercomponents to reflect the aforementioned changes to the components.Hope this PR can be merged as soon as possible. If there are any issues with the code, everyone's feedback and suggestions is welcome.