Complicated date field with range option

Question

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.

Answer 1

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.

Answer 2

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:

and you can toggle that to enter a range:

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.

Answer 3

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.

Answer 4

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