Skip to content

Conversation

@onmax
Copy link
Contributor

@onmax onmax commented Feb 2, 2026

πŸ”— Linked issue

Resolves #4889

❓ Type of change

  • πŸ“– Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • πŸ‘Œ Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

πŸ“š Description

  1. Add supports for calendar month picker modes via type prop
  2. Add support for year picker modes via type prop
  3. Interactive view switching (day -> month -> year). Maybe too opinionated?

Changes:

  • Add type prop (date | month | year) for standalone pickers
  • Add view / defaultView props for view state control
  • Clickable heading to switch views (day -> month -> year) when type="date"
  • New theme slots: monthGrid, monthCell, yearGrid, yearCell
  • New slots: month-cell, year-cell for custom rendering

πŸ“Έ Screenshots

Feature Screenshot
Month Picker (type="month") image
Year Picker (type="year") image
View Switching (heading click) video below
Cap.2026-02-04.at.14.31.40.mp4

πŸ“ Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@github-actions github-actions bot added the v4 #4488 label Feb 2, 2026
@onmax onmax force-pushed the feat/calendar-month-year-picker branch from d181f50 to 28da0df Compare February 2, 2026 15:41
@onmax
Copy link
Contributor Author

onmax commented Feb 2, 2026

@benjamincanac what do you think about this PR? Do you like the API?

There are some styles I would like to improve and nail down. But I think is mostly ready :)

Let me know your thoughts! Thank you!

Once we decide to move forward I will ammend PR fixing CI and fixing UI issues

Copy link
Member

Thanks for the PR! I do like the API with the type prop approach, it's consistent with other components.

However, it adds lots of code since there are no primitives for this in Reka UI. @J-Michalek what do you think about this? Are you aware of such thing being added in Reka UI any time soon?

@J-Michalek
Copy link
Contributor

Well there is an issue open for 8 months unovue/reka-ui#1933 and the activity in the repo is mild at best, but I think we should rely on RekaUI to provide these inputs...

Perhaps the author of this PR would be interested in implementing in RekaUI?

@caiotarifa
Copy link

caiotarifa commented Feb 3, 2026

I’m the author of the feature request in Reka UI (unovue/reka-ui#1933), and it has already gathered meaningful community interest (19+ reactions).

As mentioned above, this PR adds a fair amount of code mainly because Reka UI doesn’t provide primitives for month/year picking yet.

@onmax, if you’re open to it, migrating this PR to add MonthPicker and YearPicker primitives in Reka UI would be an excellent win for the ecosystem (as @J-Michalek suggested).

@onmax
Copy link
Contributor Author

onmax commented Feb 3, 2026

Thanks for the feedback. I will prepare a PR for Reka UI.

@benjamincanac, should I keep the behaviour shown in the video? I am not 100% this is the best ux πŸ€”

@benjamincanac
Copy link
Member

I think I like it yes, it avoids having to implement popover and lets us render a Calendar only for months at the same time as selecting a month for a normal calendar.

@onmax
Copy link
Contributor Author

onmax commented Feb 3, 2026

Ok, i won't bother you again 😬,

once reka ui is released and this pr is ready I will mark this pr ready and i will ping you.

Feel free to post any feedback though. Most of the code is ready. I am just testing it throughly :)

@onmax onmax force-pushed the feat/calendar-month-year-picker branch 2 times, most recently from 4d64993 to ae0edf7 Compare February 3, 2026 17:54
@pkg-pr-new
Copy link

pkg-pr-new bot commented Feb 3, 2026

npm i https://pkg.pr.new/@nuxt/ui@5981

commit: ae0edf7

@onmax
Copy link
Contributor Author

onmax commented Feb 4, 2026

For reference: much better approach imho

image

@sewalsh
Copy link

sewalsh commented Feb 4, 2026

Great to see work on this! I've long missed it since version 2.

Just my 2c. I think a 3x4 grid looks neater as was used in v2: https://ui2.nuxt.com/components/date-picker#datepicker

@onmax onmax force-pushed the feat/calendar-month-year-picker branch from 83cbfce to dc8123d Compare February 12, 2026 07:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

InputTags doesn't emit blur

5 participants