Year selectability for more distant dates

[ShadeDream]

It would be beneficial to have the option for year selection (maybe by optionally turning the year into a select?) for uses where selecting a date might be a ways in the past or future. For example: the publish date of a publication. Currently it requires a lot of clicking those previous/next buttons depending on the use case.

[WickyNilliams]

It's possible to build your own using the focused-date attribute/focusedDate property. Here's an example https://codepen.io/WickyNilliams/pen/GRLYYRP

Though it's not ideal right now since you end up with the year showing twice (once in the select, once in the heading). I'm thinking of making a slot for the heading, so you can replace the content if you wish. The heading is already hidden from screen readers and there's a separate visually hidden accessible heading, so there won't be a loss to do so.

Then you could do something like:

<calendar-date>
  <select slot="heading">
    <!-- … -->
  </select>
</calendar-date>

What do you think about this?

I don't want to get into adding year selects within the component itself. At least not now. People have varying ideas how they should work. Not everyone wants the select, some will just want next/prev year buttons. Others will want neither.

So I'd rather make it so people can build what they want without having to make any commitments in the components themselves

[ShadeDream]

Thanks, this looks like something that I can make workable for us. I can understand the desire to keep the component light.

I think as long as the component itself allows for enough flexibility to do the different things people commonly need, that's probably fine. This would probably make a good addition to the guides section of the documentation site.

I can't speak for others but I'm more used to dealing with components with far too many options, but at the same time having them all documented so I can disable and enable the ones I need, so having good documentation/guides for how to extend a simpler one like this would definitely be helpful.

Thanks for the fast reply and example!

[ShadeDream]

I implemented this in my project and it seems to be working great. Like you mentioned, it would be ideal to be able to use the heading slot for it, much like the next and previous slots. Thanks again!

[WickyNilliams]

Glad to hear. I have a branch locally where I've made this slot available. I'll get it out with the next release. I've just been busy the last couple of weeks

And yeah the docs definitely need some more examples. It's on the todo list also 😁

[WickyNilliams]

Just published v0.6.0 which includes the new heading slot. I've updated the codepen above to use it. Looks better without the duplication:

[ShadeDream]

Awesome, thank you!