I want to offer the users a way to select a range of months within a year. The selected months are used to display a table of data. The control should be placed above the table and since vertical space is limited, it shouldn't take up much vertical space.

I thought about a list of checkboxes:

[] January  [] February  [] March  [] April  [] May  [] June 
[] July  [] August  [] September  [] October  [] November  [] December

That has as problem that it is not clear which months are selected. It offers the possibility that people could select a broken range (which is allowed but most likely not wanted).

An other option could be a multiselect control like the one found in Chosen Chosen Multiselect control

That does seem a little overkill for just twelve options.

What control could I use?

  • From the answers already given, I think it might be worth clarifying what you mean by a "range of months within a year". Does the user first select the year (e.g. 2011), and then choose the range (e.g. Feb-Aug)? Do you want them to be able to select multiple ranges (e.g. Jan-May and Oct-Nov)? Can they select a range that spans two years (e.g. Nov-Feb)? If so, how do you determine which year it refers to? – Alex Feb 10 '13 at 8:25
  • @Alex the current design lets the user first select a year and then select the months within the year. But I might need to reconsider that in light of the answers. – Pesikar Feb 10 '13 at 13:14
  • Are the months always within one year? Would a person never have to select Nov of one year - Feb of the next? – DA01 Feb 11 '13 at 16:32

I think if you are selecting a single range within a single year you can keep it super simple (and easy to use) with a pair of select boxes.

select boxes


  1. Minimal Vertical Space
  2. Easy to select the month (the user can just tab and type the first letter of the month)
  3. Minimal development cost
  4. Easy to add helpers (e.g. hints that show number of months selected)


  1. Hard to select multiple ranges
  • 1
    KISS. And it wouldn't have to be that hard to add multiple ranges. Eg, a button to add another pair of drop-downs, and it sounds from the OP that it's a rare occurrence anyway. This also lets you do the 'Nov to Mar' option if you need to. – Roger Attrill Feb 10 '13 at 22:31
  • 1
    ...why didn't I think of that? – Sam Pierce Lolla Feb 16 '13 at 22:21

If you are asking for data that usually follows a particular format, then ask for it in that format. Visually people are used to months shown in a calendar, so show it in a calendar, and let them select the months that they want.

Visually it is very easy for someone to see whether they have the months that they want like that. Here is a quick example of what it could look like with three examples of different data entered.

enter image description here

  • This + shift/select excel-style fits the bill best for me. – Erik Reppen Feb 11 '13 at 14:16

As long as it truly is within a single year, a range slider seems appropriate here.

enter image description here

via Kevin Anderson on Dribbble


The date range picker on the google finance site solves the problem with my previous answer. This example doesn't "snap" to month increments, but a different implementation certainly could.

enter image description here

  • 3
    And how would you do November through February in this? – Marjan Venema Feb 9 '13 at 8:41
  • 2
    Good point--hence, "as long as it truly is within a single year." (Pesikar wants to find a way to select "months within a year".) I'm assuming a year is one calendar year... if not, we'll need a different method :) – Sam Pierce Lolla Feb 10 '13 at 0:03
  • 1
    Nice edit (and find :-) – Marjan Venema Feb 10 '13 at 10:42

If a range of months could span across the year end, perhaps a circular dial makes more sense.

Since you have limited vertical space it would have to be a dropdown though.

Something like this perhaps:

enter image description here

  • 9
    Did somebody mention overkill round here? – Roger Attrill Feb 8 '13 at 22:41
  • 3
    Really weird. In a year, December is not close to January. – Nicolas Barbulesco Feb 9 '13 at 14:43
  • 2
    It might not be clear enough how to select March - November instead of November - March (esp. for the colorblind) – Sam Pierce Lolla Feb 10 '13 at 1:19
  • 1
    The good thing is, you can change the colour scheme. – Roger Attrill Feb 10 '13 at 14:08
  • 1
    @ErikReppen The controls may follow a circular arc, but your mouse movement doesn't have to. Certainly I'd advise against such a circular motion if you intend to repetitively do this all day long, like in some bulk data entry capacity. – Roger Attrill Feb 11 '13 at 16:54

What about a type of slider control, but with a start handle and end handle? This control will clearly illustrate that they can only select a range of concurrent dates (and not randomly select dates, as either of the options you've shown above implies).

  • 1
    And how would you do November through February in this? – Marjan Venema Feb 9 '13 at 8:41

A multi-select dropdown with check box, will serve your purpose. Its simple and intuitive.

jQueryUI multi select widget


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.