Best way to pick a calendar week + year

Question

I have sub-navigation underneath my main website navigationbar. I want to display a set with calendar weeks (1-52/53) and the years (2019 - 2021) where use can pick.

Because 52 week options are a lot to choose from I wonder which actually is the best selection form to solve this. problem. I started with 52 horizontal lined up buttons, but this options was horrible. Otherwise a dropdown menu with 52 options seems to be overloaded aswell.

Is there any option I am missing right now? Thank you. :)

PS: The web app is usually accessed from desktop.

Answer 1

You could consider using a calendar picker in which the only selection a user can make is an entire week (as opposed to a typical calendar picker where users can select specific days). This is a pretty standard web convention for dealing with user-input dates. Depending on your use case, it could also be helpful to label the weeks with numbers, and allow users to manually edit both the week number and/or date text to quickly change, for example, from Week 1 2019 to Week 1 2021.

E.g.

[2021 Week 1] : [01/03/20 — 01/09/20]

Similar to standard date picker conventions, clicking the first or second text box would allow the user to edit that text AND expand the date picker to choose a week.

For an example of this widget, see https://www.jqueryscript.net/time-clock/Week-Picker-Plugin-jQuery-UI.html

In reference to this example widget, I'd suggest making it more clear that the user has selected an entire week, rather than just a collection of 7 days (ie highlight the entire row including the week number).

Answer 2

A dropdown menu limited to the actual month would be a good solution if the users are going to select weeks around the actual date, like for example in a flight/hotel booking website. But if the users need more flexibility maybe adding some input fields could be helpful:

Answer 3

Use a scrolling display table with 5±1 rows visible at a time, each showing a full week and being selectable. The first column should display the ordinal week number, the following seven columns would be for the days of the week and show the day of the month in each cell. You also need to show the year and month of the majority of the rows.

January 2021

Week	Mo	Tu	We	Th	Fr	Sa	Su
W53	28	29	30	31	01	02	03
W01	04	05	06	07	08	09	10
W02	11	12	13	14	15	16	17
W03	18	19	20	21	22	23	24
W04	25	26	27	28	29	30	31
W05	01	02	03	04	05	06	07