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.

  • Why do users need to select a week instead of a date range? – locationunknown Dec 21 '20 at 18:39

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.


[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).


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:Google Analytics Date Selector


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.