[Feature]: Example of datepicker with month/year selection views

[DamianGlowala]

Describe the feature

It is vital for any datepicker (especially for these which do not allow to enter a date using keyboard) to have a month/year pickers. Navigating x months/years backwards/forwards requires countless number of clicks.

Could such an example implementation be added?

For reference: https://primevue.org/datepicker/#basic

Additional information

• [ ] I intend to submit a PR for this feature.
• [ ] I have already implemented and/or tested this feature.

[sadeghbarati]

@DamianGlowala

https://www.shadcn-vue.com/docs/components/calendar#month-year-selects

Check this example

import { createDecade, createYear } from 'radix-vue/date'

RadixVue exposes two utilities called createDecade and createYear which you can create months and years selections with the help of CalendarRoot, date slotProp

With these functions, you can create your own customized months or years selection like Primevue example you shared or any other style you want you can place it wherever you want

---

I'll share Stackblitz with Primevue style if you want

[DamianGlowala]

@sadeghbarati thank you for letting me know about the date utils, wasn't aware of them! If Stackblitz demo of such a datepicker wouldn't be a problem, it would be great to see how this could be done properly 💯

[DamianGlowala]

@sadeghbarati may I kindly ask you whether you had a spare moment to look into sharing an example solution for a month/year selection views? Just wondering, no rush at all :) a complete example even for a single view would be a great starting point!

[sadeghbarati]

@sadeghbarati may I kindly ask you whether you had a spare moment to look into sharing an example solution for a month/year selection views? Just wondering, no rush at all :) a complete example even for a single view would be a great starting point!

Lol sry I was working on creating test projects for codmod team I got no time working on it

Will keep you posted within two days 🙌

[sadeghbarati]

@DamianGlowala I created some goofy demo that summarizes how to use those utilities with Calendar or DatePicker components 😄

Feel free to refactor the style to make it like the PrimeVue one and maybe make a PR to shadcn-vue if you interested

https://stackblitz.com/edit/6m2dpp?file=src%2FApp.vue

[rogrile]

Hey, is there someone working on this though? It would be useful to have such a component without the extra work of implementing it ourselves.

[DamianGlowala]

@sadeghbarati thank you so much 💙 not sure whether to close this issue (considering the above comment)?

[rogrile]

I tried using the range calendar (as it's built on top of the Radix Vue range picker which is supposed to have granularity) but that never works. I would really love to see some implementation of this. Thanks for all the work.

[sadeghbarati]

cc @epr3 🙏 please look above comment about granularity

[rogrile]

Yeah, my mistake here, looks like granularity is only available for date picker in radix. I guess this needs to be built on top of Radix's Picker if we want it as an option. Until then, I guess I have to stick with v-calendar, but I am having issues with it :(