feat(calendar): add yearselect

[oof2win2]

Add a year and month selector to the calendar component. This is important for usecases such as entry of birthdates, as users would otherwise need to click a lot on the arrows.

I have decided to replace the buttons with this PR, however, due to this reason, I believe that this PR is WIP and I welcome any feedback.

[vercel[bot]]

@oof2win2 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[oof2win2]

An issue that I have and am not able to fix is the select for the year taking up the whole screen, as seen below. I have attempted to fix this with max-h in multiple components including the base Select component, however, to no avail.

[emrosenf]

You could also look at using the captionLayout, fromYear and toYear in the underlying component, with some new CSS rules

            <Calendar 
                  mode="single"
                  selected={date}
                  onSelect={setDate}
                  className="rounded-md border"
                  captionLayout="dropdown-buttons"
                  fromYear={2015} toYear={2025}
            
            />

[oof2win2]

The dropdown layout seems cool, and thanks for that - didn't notice it! The issue with it is that it doesn't allow for taking the values that the dropdown itself should display without accessing the internal props of the child elements - which seems relatively hacky for this. Not sure if there is a way to go around that. Checked both the DropdownProps and the DayPickerContext itself.

[emrosenf]

I don't understand the issue, did you try my example?

fromYear and toYear are props.

This is what I did to make a year select

[oof2win2]

Yes, I do understand that. The react-day-picker component itself however doesn't allow for customization of the select element with the use of our selects, which I believe is relatively important here to make the the UI seem the same as with other usages of select components. My previous comment was about attempting to style those, which is not possible without taking the internal props as those are not provided.

[shadcn]

@oof2win2 I think we're going to go with https://github.com/shadcn-ui/ui/pull/1680 which has the most recent updates. But appreciate you starting the work on this. Thank you.

[oof2win2]

Sorry, completely forgot about this. Happy that I could have helped even at least a bit 👍