If you have ever designed a Web form, you will almost certainly have asked your website visitor to give you her or his name. I wrote about that in my previous post on Web form design. Almost as common is asking visitors whether they are male or female—about which I shall be sounding off in my next post on this topic. In this post I want to say a couple of simple things about asking for dates in Web forms.
People who design forms for airline flight bookings aren’t likely to be reading this post. But lots of us design forms for local car hire companies, or local property agents, so that bookings can be made online. And both of these are common on the Costa Blanca.
The first point is really obvious. Don’t expect people to enter dates by hand. Give the website visitor a popup calendar for each date field. In particular, I recommend the jQuery UI date picker. You can style it exactly the way you want, and, in its recent versions, it has all the options any Web designer could ask for.
And now a free goodie. Lots of us want to set a second date picker to start at the date already set by a first date picker. I spent months Googling for a simple way to do this before I came across a solution. And this is my simpler version. (In programming, as in maths, the simpler solutions are the more difficult to work out. And the more useful to other people.)
$( document ).ready( function() {
$( "#start" ).datepicker({ dateFormat: 'yy-mm-dd', firstDay: 1 });
$( "#end" ).datepicker({
dateFormat: 'yy-mm-dd',
firstDay: 1, // Monday, for Spanish calendar
beforeShow: function() {
dt = $( "#start" ).datepicker( 'getDate' );
return { minDate: dt };
// JSON - dt could be 'null' (which is OK)
}
});
});
This relies on your knowing some jQuery, of course. But you’ll need that to use the date picker. Date field 1 has an ID of start; date field 2 an ID of end. You won’t need ‘firstDay’ at all if your week begins on Sunday. Check the date picker documentation for the other option fields.
That could be it. But I have one axe to grind. If you have to ask for dates using separate days and months, do not use the provincial American order of month-day-year, especially if you’re asking for numbers.
I sometimes wonder if the effect of their date system on their infant minds is why some Americans have such odd ways of thinking. Year→month→day (as in the MySQL format above) makes sense, going from greater to lesser; so does day→month→year, going the other way. But month→day→year? Month→day→year? It just leaps about the place, without any logic to it. 11/09/2001 is a date to make all of us feel a sense of human solidarity with Americans. It’s the eleventh day of September, 2001. The problem is that Americans write it 09/11/2001, which can only logically refer to the ninth day of November. I suppose it’s a sign of our solidarity that almost all English speakers now refer to the date as “nine-eleven.” But we mustn’t let our solidarity influence us when asking for dates in Web forms.
