Context: I'm designing a web form that allows users to enter information about some work they've created (title, description, image, etc).

One of the optional fields will be a date field. After discussing the product with some target users, I've found they have different needs with regards to this field.

  • Some want to enter a specific date (e.g. March 3, 2013)
  • others would like to enter a year only
  • while some others have the need for a range (e.g. 2012-2013).

One of the other requirements of the product is that users can filter/sort their work by date, so a generic text field won't work unless a specific format is followed. I'd love to hear some options for what's worked for others in the past.

  • Just a thought about a potential pitfall for 'other requirements' that came to my mind: If date is optional and some entries do have a date, some a range and some no date, how does this impact the filter/order by date feature? Apr 15, 2013 at 14:32
  • Agreed. We will likely have to have separate rules for filtering from ordering...
    – julie p
    Apr 24, 2013 at 1:00

4 Answers 4


A series of dropdowns or comboboxes could work well, allowing the user to specify the date at whatever level of granularity she wants.

Initially just show:


download bmml source – Wireframes created with Balsamiq Mockups

If the user elects to choose a year, you can then show an additional dropdown for a month, as well as revealing an option to add an end range to the year, defaulting to the current year.


download bmml source

...and then if the user decides to specify a month, give her the option to specify a day.


download bmml source

Even if the user is choosing a range from a specific day to specific day, the year and month of the two will usually be the same, so by setting the end date to default to the same as the start date, you make it so that the user will usually only need to select only four dropdowns to specify a precise date range. At the same time, you allow her to choose only one or two dropdowns if she wants to specify a more granular range.

  • 1
    I like this idea, but it doesn't address the range. If I follow this method, the user could theoretically have to do 6 pulldowns to enter one range. I wonder if there's a way they can choose the date type prior to entering it??
    – julie p
    Apr 13, 2013 at 15:27
  • @juliep Good point. I've expanded my answer to address this need for a range. Using default values, the user would likely never need more than four selections, even if she wanted to specify a precise range from a day to another day. Most choices would require fewer selections. Apr 13, 2013 at 16:29
  • 1
    TY 3nafish. I've shown this to some of my users and they think this is the easiest, although I'm going to use a text field so I don't have to have 100 dates in the dropdowns :)
    – julie p
    Apr 14, 2013 at 14:38

Just stumbled across this on linkedin. Linkedin uses a simple toggle link to change between range and single date.

You have a standard single date picker by default:enter image description here

and you can toggle that to enter a range: enter image description here

In your case, if the user wants to avoid month, they can leave the month dropdown empty (have the first option as null) and just select the year.


I'd go for a single text input field and allow free form range entry along the lines that Fogbugz and time trackers are doing for durations. These allow input in various forms and interpret it themselves without requiring all kinds of date specific controls.

For example Jira (an issue tracker) will interpret a tasks duration from a single text field:

  • 1h => 1 hour
  • 2d 5h => 2 days 5 hours
  • 3w 4d => 3 weeks 4 days

You'll "just" have to come up with some simple clear rules for parsing the input.

An absolute necessity will be to give immediate feedback on how you are interpreting the input. This could be in a label under or to the right of the text input field.


To make complicated things easy, you need something that's familiar to users and doesn't take a lot of effort from the users. How about an (intelligent) slider where you can chose year or date without end date (mockup 1)? This could be improved by a second slider for end date (mockup 2) so you really don't need to change the control itself or make use of multiple dropdowns which are a lot of work for your users.


download bmml source – Wireframes created with Balsamiq Mockups

This design would solve all three of your users problems...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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