A More Forgiving Date-Input

If you’ve ever made a date-input for a from, you know they are a whole bucket of butt-hurt. For some reason users have gotten used to getting yelled at when they use an incorrect separator or date-format, which shouldn’t be acceptable. Sure, validation is necessary, but having to type leading zeroes is more of a 1995 thing, and shouldn’t be an issue anymore. It’s time to make the datefield a little more forgiving. But before we get into that, let’s see our options for date-input right now:

Browser datefield

<input name="birthday" type="date" />

Basic form input

<input name="birthday" type="text" />
Let’s examine both of our options:

type=”date”

This is a relatively new addition to HTML, which explains why it’s still a cross-bowser nightmare. The browsers that support the new input type have all made their own version of it, with varying success. Right now, only 58% of browser support it, and when they do, there are a few issues; validation is terrible and not customizable, instead relying on the browsers own tooltips and prompts, which are usually not that great. You get stuck with great error messages like ‘please use the supplied format’, which is about as useful as eating soup with a fork.

Worse though, is trying to use the input without the datepicker. If you manage to actually type something in the date field, it’s probably going to be wrong. Why? Because the date-format is set by the language of your browser. So if you live in the Netherlands like me, but prefer the original english Chrome, your date-format is set to mm/dd/yyyy, instead of the Dutch dd-mm-yyyy.

type=”text”

The creation of the date-input wasn’t without a good reason, using a text-input for a date brings out your inner dictator. First you have label the field with the required format that you need for your database (mm-dd-yyyy or something), and if users stray from the format, BAM! validation errors everywhere. Not very forgiving…

So first, you get visitors to feel at home on your website. The site is great, you can do whatever you like. We’ll work for you, you can trust us. All of that effort and trust is gone the second you start screaming errors at your users:

You’re using dashes instead of slashes for a date?!
What kind of animal are you!

 

What we really want is a forgiving text-input, in which a user can enter a date any way they like, which we can do using some simple logic that, for some reason, nobody ever uses on their website. For this example, I’m not going into dates that use text, like Feb. 3 1982, but numerical input. Let’s start with how many digits a date can have:

date-flowchart-davidhalford-com

 click the image for a larger version

See, it’s not that hard. There’s really only one caveat, and that’s when you can’t logically determine if the second digit is part of the day of the month. Fixing that is very simple; just ask the user. There are just over 2900 possible entries for all the different date formats,  and roughly 6% of those can’t be calulated. That’s not bad, considering we were shouting at our users only 5 minutes ago. Now, 94% of them get a smooth ride, and the other 6% get an extra question clarifying their date. Much better.

Try it

I’ve tried to make this one as humanly readable as possible, just so you can read along with the code. I know it could be shorter, better or have more cowbell, but then you wouldn’t have anything to do, now would you?

See the Pen Forviging Date Input by David Halford (@davidhalford) on CodePen.

try any 4 to 8 digit string (like ‘1291’ or ‘01021991’), on change the script will decide how to format the date. Bonus points if you try one of the dates that require clarification like ‘11182’.

Please note: this is a simple example of formatting of a date, there is no validation at all. (so the 31st of February is possible if you really want to go rogue…) Validation should’t be that hard to add yourself if you need it. (you do.)

Have fun.

image credit

Header image: Alyson Hurt on Flickr