logo

Forms That Allow Date Entry Using Words

Imagine a form with a Date field on it, in to which you could type "next monday", "tomorrow", "oct 12", "today +3m" etc. How cool would that be? Yeah, pretty cool. Well, try this for size!

The other day I showed a way to convert a date value to words, which was a nice to way to display a date to users in a way they could more quickly digest. So, instead of showing 10/9/2008 to a user you could just show "about a year ago".

Today's demo is the reverse of that. It shows how you can convert words to a date, allowing users a much easier way to enter dates in to forms.

I bet most Forms you create have a date field on them, right? How do users enter the date -- do they type it in or do they use a date picker? Either way I bet they (and you) find it a cumbersome bother. Allowing them to enter dates by typing what they want will be a real crowd pleaser. The only trouble will probably be that they then expect all other forms to do the same and you'll then have your work cut out for you to retro-fit the code!

The code used in the demo comes from the brilliant DateJS library. The demo form only scratches the surface of what it can do.

Comments

  1. I had a feeling you'd be tackling the date entry part too. I did some work around this idea but for the Notes client. Never finished it though.

    • avatar
    • Jake
    • Fri 12 Sep 2008 05:12 AM

    I have the advantage of standing on the shoulders of giants Vitor ;o)

    • avatar
    • Ben
    • Fri 12 Sep 2008 05:14 AM

    Very nice. one issue, I tried Shrove Tuesday, and Christmas day, and it didn't recognise it!

    • avatar
    • Jake Howlett
    • Fri 12 Sep 2008 05:16 AM

    Nor does "my birthday" - what use it!?

    • avatar
    • Alastair Grant
    • Fri 12 Sep 2008 05:21 AM

    Very good...

    Trying to think of a practical use.... as it easier to select the date rather than type, also if you mis-spell the word then have a problem e.g. 'tomorow' instead of 'tomorrow' (see post above to see how common it is ;-) ) and handling foreign languages..

    Maybe also some icons that could make the date change?.. anyhow technically great..

    • avatar
    • Jake Howlett
    • Fri 12 Sep 2008 05:31 AM

    I can think of loads of practical uses Alistair. It takes a bit of getting used to for the user but I think (once they're up to speed with it) it's *easier* to type than to select. Say you want to enter a date in 6 months' time. Do you open the date picker and press next 6 times and then find the current day in that month and press it or do you just type "+6m".

    I added the "parse" process to the onblur of the field, which makes it a bit more obvious what's going on.

    The code itself is completely "globalized" and can work for any country/region etc.

    The best part is that the "parse" process can be called on all date fields without affecting any actual dates entered. So users don't even need to know they can enter dates in words unless you decide to tell them or by some fluke they work it out. It's not like it's one or the other - you can use it as well as a date picker rather than instead of!

    It's even accessible ;o)

    Oh, typo fixed in blog. I do know how to spell tomorrow as well. Doh.

  2. Alastair, what's that about "easier to select the date", is that done with a mouse? Argh! Real power users use the keyboard, much faster once you know the shortcuts. That's the reason why typing dates in natural language is much easier.

  3. Very nice - it also works with next fri or next wed which is an even better time saver.

    And it got "2 week today" .. although using a plural "weeks" tripped it up.

    Very good though.

    • avatar
    • Alastair Grant
    • Fri 12 Sep 2008 08:38 AM

    Seems like it is flavour of the month as well, Mozilla are working on 'Ubiquity' see link below..

    Link

    You could even remove the need to apply the '+' prefix and assume that forward is a default unless you prefix with a '-'.

    Haven't yet seen a site where you type the date as part of an input form rather than select, would be interesting to see some examples in the wild if anyone has any links..

    Have a good weekend,

  4. Alastair - a couple of links for you:

    Link

    Link

  5. There are some pretty cool techie features that I don't think most users will understand. It doesn't support abbreviations. The user has to type in "tomorrow" instead of "tom". What if the user prefers to use a drop down calendar? I know I'm complaining and it's not because I've done this before, which I have. Here are the instructions:

    Link

    Here's the demo:

    Link

    It's a hack of two different javascript files, one from Simon Willison and the other is a highly modified version of Lea Smart's calendar popup. It was created back in 2006. I've been meaning to combine the two files into one and change the code to use Object Literal Notation but haven't gotten around to it.

  6. Hi Jake,

    Everytime I tried a text date in the past it broke.

    e.g. 'last wed' etc. Not sure if this is a limitation or functionality not yet implemented.

    Besides the above I like it and thanks for bringing to our attention.

    regards,

    Alan

  7. Update to last post:

    Last week etc does work, just don't press enter when inside the text box !!!

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Fri 12 Sep 2008

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content