2

I'm currently using <input type="date"> to capture a date. However, a lot of users don't know the exact date but still want to record an approximate date.

I want to encourage as high a degree of accuracy as possible but also want to be able to capture the following levels of detail so as not to exclude people who don't know:

  1. Day yyyy-mm-dd
  2. Month yyyy-mm-xx
  3. Year yyyy-xx-xx
  4. Decade yyyx-xx-xx

Some examples of input I've received from people using browsers that don't support <input type="date">:

  • in the 80ies
  • April 2015
  • 2009
  • 1996-00-00
  • 1996-07-00
  • late 2010
  • 1985ish?
  • 1985-is-h? (after receiving error message "date must be in the format yyyy-mm-dd"!)
Improve this question
3
  • What are your requirements? Does this date information need to be stored as an actual date? What are the benefits of a specific date (day) vs. broad estimate (decade)?
    – DA01
    Jun 15, 2015 at 15:51
  • The dates where I can allow approximate data are just used for display on user profiles & club listing pages. Accurate dates are better because they calm my OCD!
    – Orinoco
    Jun 15, 2015 at 17:47
  • Your OCD probably shouldn't be in the requirements. From what I gather on your comment, these are dates merely for the benefit of the user and are only used for display purposes? If they're not used for sorting or anything, then perhaps leaving them as free-form text fields is just fine.
    – DA01
    Jun 15, 2015 at 18:38

2 Answers 2

Reset to default
0

Input type=date is not a very good option due to its lack of cross browser support and therefore inconsistency. If you want a consistent cross browser solution, either use jQuery pickers or if you want to use native options, use 3 dropdowns (month, day, year). While some may argue you need 3 different elements, hence 3 actions, all tests I have seen, BOTH ON 3rd party research as run by myself, show it's the easiest method for the user. And to make it even better, is the best method for site admins as well!

Now, on to your undetermined data range: it's unclear to me how is your current form laid out, but I'd add the 3 dropdowns mentioned above to allow for accurate date, then at the side a link that reads not sure? Click for options or something like that. Then if user clicks the link, a div expands displaying a range input type. Be sure to explain the user what do you expect in terms of range and to make it as accurate as possible

Improve this answer
4
  • The date part of the form is literally just a type=date, browsers that don't support the input type see a label requesting the format yyyy-mm-dd. However, server side I check in order:
    – Orinoco
    Jun 15, 2015 at 17:28
  • \d{4}\D\d{1,2}\D\d{1,2} - so user can use any separator, & numbers with or without leading zeros, if it is not a valid date I check for yyyy-dd-mm If still invalid I check for \d{1,2}\D\d{1,2}\D\d{4}, I either use dd-mm-yyyy or mm-dd-yyyy if one is valid, if both are valid I ask the user to choose which one is correct If still invalid I try strtotime(), otherwise I return an error. Over the past 3 years the only input errors I've seen are attempts to record approximate dates as shown in OP.
    – Orinoco
    Jun 15, 2015 at 17:36
  • please note I'm talking about consistency, being consistency the keyword. If you're OK with a solution that is different in every browser, that's cool, just mentioning the visual consistency issue. So you can consider the input=range part of the answer, since basically you want exactly that: a range. On a programming side, your approach seems a bit cumbersome when you could simply make the user enter data in one an only one way, but again, if you're OK with it, so be it, just not the best UX approach IMHO
    – Devin
    Jun 15, 2015 at 17:43
  • Thanks for your answers, I've played with 3 dropdowns including a script that updates the number of days depending on the month selected but it just feels so longwinded to use. At the moment I am trying this: jugglingedge.com/help/fuzzydateinput.php & so far so good. I agree it may be cumbersome but computers are patient, my users are not!
    – Orinoco
    Jul 12, 2015 at 16:21
0

I'm not entirely clear on the requirements, but it sounds like:

  • dates can be specific or very fuzzy
  • you want consistency in format

I think this is where dropdowns may be a good solution:

Year:                  Month (optional):         Day (optional):
[2015        ∇]        [--          ∇]           [--          ∇]

That doesn't account for the 'decade' option, though I'd argue that that is perhaps too fuzzy of a time period. If a person can't remember at least down to the year, then maybe it's not that important in first place?

Improve this answer

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.