Creating a DatePicker with a year or decade view

[mattwendzina]

Hi,
I've had a great experience creating a DatePicker component and am grateful for the fantastic documentation.

However, I've hit a bit of a blocker in trying to create a Datepicker with both a yearly view and a decade view. That is, where I can allow users to select a month or a year rather than a day. And where the Previous and Next buttons will enable me to go forwards/back a year/decade respectively.

Does anyone know how this can be achieved and can point me to any examples?

Many thanks in advance

[LFDanLu]

Just to clarify, are you trying to make a DatePicker with a Calendar grid made up of months/years like this?

Or are you trying to extend a typical month Calendar grid with additional controls for month/year selection?

[devongovett]

Keep in mind that you could build this yourself and reuse the calendar state. This example shows a custom month/year dropdown that does this. Your example has a bit more complex UI, but it should be possible in a similar way. https://codesandbox.io/s/affectionate-rosalind-tdm323?file=/src/Calendar.js

[mattwendzina]

Thanks for this @devongovett, really helpful! I've managed to get a yearly view working now, with the DatePicker 🙌
https://codesandbox.io/s/xenodochial-curie-9k38nz?file=/src/DatePicker.js

[PixeledCode]

Were you able to handle focus change using navigation keys?

[TylerLHenderson]

Hey @mattwendzina, your codesandbox link is gone.
Were you able to get the year grid view working or did you go with the year dropdown select version?

[ChernYeeLow]

I've created a customized calendar with month/year view. But when I integrate the calendar to RAC date picker component, the value of the DatePicker fails to pass to the Custom Calendar component. When the user selects a date in the Calendar, the popover also does not close, and the value of the calendar does not pass back to the DatePicker component. Any ideas?

[cssinate]

I just wanted to add an additional voice of support for expanding the functionality of this calendar. I work for a company that builds software for retirement communities. Selecting a birth date from a calendar is something our users like to be able to do. If you look at the example here: https://projects.wojtekmaj.pl/react-calendar/

Clicking the month name at the top of the calendar, brings you to a month selector. Clicking the year at the top of the month selector brings you to a year selector. In the year selector, clicking the back and forth buttons runs the user through decades. Having built-in functionality like this would be really helpful.

[devongovett]

For entering birth dates, have you looked at using a DateField instead of a Calendar? IMO it's much easier to enter dates you already know with a keyboard rather than clicking 17 times to get to the right part of a calendar. Calendar is much more useful for a browsing experience when you aren't sure what date you'll select. You can also combine the two with a DatePicker.

[cssinate]

Yes, we're doing both a text input and a calendar. Our user research shows that a not-insignificant portion of our users prefer to use the calendar rather than the input field when they're on iPad.