Sunday, 19 October 2008

jQuery Time and Date UI

I have just uploaded a new plug-in to the jQuery plug-in repository. The plug-in is a mechanism for entering and validating a time and date into a form.

The plug-in inserts five text boxes representing: hours, minutes, day, month and year. User can either type in time and date or use spinner style functionality using: up, down, plus or minus keys. User is unable to type in a time or date that doesn't exist, leap years are accounted for.

Any element can be used as place holder. The place holder will be hidden except in the case of labels and divs, where the control is inserted within.

The plug-in currently supports British entry date format, before I drop the beta tag I'd like to have support for a couple more formats.

Example:

$("input.date").timeDateUI(); //Initialise
var date = $("input.date").timeDateUI(); //Return entered date
$("input.date").timeDateUI("remove"); //Resets elements
$("input.date").timeDateUI({ date: new Date() }); //Initialise with default date

The plug-in also allows you to specify an alternate wrapper element and apply css styling to text boxes. Visual Studio 2008 Intellisense file is included.

The project can be located here.

1 comments:

skillfullbus said...

Hi Richard I was just googling about some time related jQuery plug-in and happened to vist your page. I must say that you have done a good job. But guess what, can you come up with a time picker similar to that of google calender? It is a smart time picker wherein even if you key in 9pm in the text box it automatically takes it as 21:00. Would really appreciate if you could give it a try.