I was just wanting to see what people thought about how I should allow users to specify a year.

Currently they are able to select a year from a dropdownlist but I was wondering if users might prefer to enter a date manually.

This control is going to be on a responsive website so considering use cases on mobile is why I think manual input might be better/quicker on mobile than a dropdownlist.

Anyone have any thoughts?



How many years are involved?

If it's a birth year, 100 options on a dropdown are too many. Instead consider four large inputs aligned horizontally, with the first two defaulted to values of 1 and 9.

enter image description here

If it's a credit card expiration date, a dropdown usually easily captures the array of possible years, which I believe is generally about 8-10 options.

If it's a date of unspecified range, such as a test answer to "What year did the Civil War begin?", I would offer a plain number input that validates for four digits.

There may be other possibilities. The important thing is to analyze the user needs and the type of data being requested. There's no such thing as a single ideal year input affordance.

  • Thanks for the response - I think due to the vast possibility of dates entered (anywhere from 2015-19..) I will allow for numeric input and validate that it is a valid year – Paul C Dec 4 '15 at 9:13

The problem with allowing users to enter dates is always just about formats.

2008? 09? 2k8? etc.

If you can think of a way to include instructions in your input AND it's a long list of years (say picking a birth year), you should consider using

If it's a short list of years, a dropdown will probably be fine.

  • I am considering a text input with placeholder of YYYY - is it too naive to assume a user will know the meaning of that? Also, will restrict to only allow numeric input so '2k8' won't be possible – Paul C Dec 3 '15 at 15:35

You have even more fine options than 2.

However the amount of years is the key decision criteria.

If it is the short list of years (maybe up to 10) the selection dropdown list is the best. People became used to that with expiration dates on credit cards.

enter image description here

For the long list the masked input is fine.

enter image description here

Additionally you can provide the slider. Beware that some users expect to enter the editing mode here by clicking / tapping on year. There you would enter the masked input.

enter image description here

If you want to be more strict you could use the spins on particular ciphers of a year number. People know this pattern from locks. By that you can impose better limits or even fix some parts (e.g. 2 0 ... while allowing to select within the rest).

enter image description here

What you use also depends on how many other inputs you have on the screen and on the importance of this particular input.

Anyway the fine UX implementation executes immediate validation checks (e.g. min/max) and provides the feedback to user.

  • Thanks for the response - I think due to the vast possibility of dates entered (anywhere from 2015-19..) I will allow for numeric input and validate that it is a valid year. I like the idea of the "lock system" but knowing my clients I don't think this would be appreciated - same goes for the sliders. We used them both on an older version of the form we are developing and they wouldn't like to see us going back to them – Paul C Dec 4 '15 at 9:13
  • @PaulC well, I would use whatever is the least annoying to fill in :) If the users are fast with keyboard the masked input is the way to go. – Radek Dec 4 '15 at 17: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.