I’m building a site with a few forms, and two of them have date fields, one for the user’s birth date (for liability waiver reasons) and one to pick a date sometime in the future.
I was pondering the best way to have a date picker. A <select> element is fine for the month, as there are only 12, but what about day (31 is sort of a long drop-down) and for year, well the person could be 80 years old, so that’s an even longer drop-down.
If I have the user type a date, that leaves the field open to different date formats (d-m-yy, d/m/yy, m-d-yy, 2 and 4-digit years, etc). I want to make it easiest for the user to enter multiple dates, and switch between mouse and keyboard as little as possible.
What sort of date fields do you use on your forms, and why?
Date-pickers are reliant on Javascript, and tend to be slower (and therefore more irritating) for competent surfers than just typing the date in. Similarly, selecting the year from a drop down list is a pain in the wotsits, because it’s got to be such a long list.
There are a number of techniques to choose from.
You could have a text input for the day and the year, and a drop-down for the month - that makes it impossible for people to get the day and month the wrong way round.
You could have three text inputs, and use ‘default text’ in each one to indicate what part of the date it is you require there - and then validate the input to at least ensure that you avoid impossible dates (although confusion over 4 May and 5 April won’t be picked up that way).
You could have a single input, and use ‘default text’ to show the pattern you want (eg DD/MM/YYYY), and again try to parse and validate the input.
I might go with the latter, and then I can break the string up at the slashes and validate each piece. I might even let them use dashes, then replace them with slashes when the form is submitted (just to keep things uniform).
As a user, my preferred date format is dd/month/yyyy, without using dropdown lists.
I hardly ever see it used, but to me it’s more intuitive and would be less prone to misinterpretation. Months in particular are, to me, words rather than numbers! If someone were to ask you when you were born, you would almost certainly answer 4th May 2011 rather than 04, 05, 2011.
If you need a number instead, you could easily replace the given month with the corresponding number. Likewise, allow 4 in the date box and convert it to 04 if you that’s what you need.
That’s a fair point, but if you want your site to be user-friendly, you’re going to have to set up your parser to accept any and all of ‘November’, ‘Nov’, ‘11’, ‘Noevmbrer’ and any other random misspellings, abbreviations or translations into other languages - the first rule of user inputs is that many or most will get something wrong. That’s why if you’re going to take words for the month, IMO you’re better off using a <select>. Then, in English at least, there’s a 2/3 chance that just pressing the key for the first letter of the month will bring up the right answer, and you get around the problem of parsing user inputs.
Also remember that in some parts of the world, they (foolishly ) write the date as month/day/year, so if you’ve just got text inputs, you need to make it pretty unambiguous what order you want the data in.
Yes, you’d have to cope with them. But I doubt if a two-char input followed by a much longer input and then a four-char input would be too hard to follow as long it is properly labelled.
Regarding the misspellings; that wouldn’t be too big a hurdle to deal with. But in any case, a select in the middle is indeed a good idea.
Well I’m in a part of the world (as is the target audience for this business) where we use month/day/year. And I agree with Stevie. Even though I say “Feb 9th” for my birthday, I wouldn’t want to type that, and I’m quite used to typing “02/09” from having to do it on countless forms. In fact, even on print forms I write “02/09” instead of “Feb” because it’s just become habit.
You could have a text input for the day and the year, and a drop-down for the month - that makes it impossible for people to get the day and month the wrong way round.
I personally like these, and for selects I type the first letter instead of just always scrolling (but maybe I’m advanced… so far everyone I watch mouses EVERYTHING which annoys me).
Someone’s gonna fill in November 9th, just know this now. : ) People don’t read lables. Separating the sections does seem to get better results the first time… but then, a label for each is necessary/good idea for text browsers/screen readers etc
) write the date as month/day/year, so if you’ve just got text inputs, you need to make it pretty unambiguous what order you want the data in.
But I doubt if a two-char input followed by a much longer input and then a four-char input would be too hard to follow as long it is properly labelled.