Selecting a date on a mobile web site

Question

I'm working on a web site that includes creating appointments on the mobile site. I have to make it work on IE Mobile.

The biggest challenge is to come up with a way to do date selection on a mobile site that:

• Is compact enough to not take forever to load on the limited-bandwidth cell network.
• Will work on Windows Mobile 6
• Prevents the user from inputing any values (free-form text box is out of the question)

The options I've come up with so far are:

• Drop-down lists for year, month, day (and client or server validation to ensure the validity of the selections, i.e. don't allow Feb. 31st)
• Use a jQuery plugin & hope jQuery can run on every device I'm targeting (IE Mobile, Blackberry, iPhone)
• Write some sort of elaborate IFrame AJAX lightbox that contains a basic calendar selector (that is, not reliant on jQuery), similar to what Google does on its mobile calendar site.

Since I can't seem to come up with any really solid ideas I wanted to see what the SO community could come up with as a decent solution for mobile date entry.

Answer 1

Have you thought about masking input? I'm not sure how well it will meet your needs, but it's worth a shot. Here's a jQuery implementation:

http://digitalbush.com/projects/masked-input-plugin/

Edit: After thinking about this some more, I would probably go with either the lightbox calendar idea you had or dropdowns. The benefit of dropdowns would be that you could enhance the input method for users that have better Javascript support. For example, you could hide the dropdowns and provide a dummy pop-out calendar that, when used, popluates values into the dropdowns.

Keep in mind you should ALWAYS do validation at the server. If you can do it at the client as well (or at least keep input limited) then that is a bonus feature to increase usability.

Answer 2

Are you working with ASP.NET? If yes, then have a look at the following links:

• ASP.NET mobile
• Mobile Web Development with ASP.NET

A calendar control is available and although I haven't tested it myself, it should work alright with mobile IE.

Answer 3

I would go with your first option

• Drop-down lists for year, month, day (and client or server validation to ensure the validity of the selections, i.e. don't allow Feb. 31st)

All the other options might work on particular phones but you going to constantly running into the issue of hey.... it doesn't work on my phone.

I would so love JavaScript to become standardised on the phone