jQuery Forum

My book, Extending jQuery, is Manning's Deal of the Day on November 11. Use code dotd1111au when purchasing for half off the normal price.

I've developed a plugin to allow fields with jQuery UI Datepicker functionality to be validated. Just add the plugin to your page after the Datepicker and Validate plugins, then add the dpDate class to your fields or to the rules section of the validate call. The plugin checks the date format, any minimum/maximum dates set, and any beforeShowDay callback affecting selectability.

I've refactored jQuery UI Datepicker to use the Widget framework that the other components use. Along with this refactoring I've introduced several other changes:

* Use of a templating mechanism to generate the datepicker layout.
* Use of commands to provide keystroke and UI elements for interacting with the datepicker.
* Use of the position plugin.
* Common date routines for general use.
* An extension module for less common usage requirements.
* Adobe AIR support (no inline event handlers).

The refactor is available at http://github.com/kbwood/jquery-ui. Have a look at the demos section for datepicker to see the range of functionality.

For documentation on the templating see http://keith-wood.name/calendarsPickerRef.html#renderers, as the same mechanism is used. The templating is home grown at the moment, but should be moved to the official jQuery model once that has been established. The templating allows for the insertion or otherwise of command links and/or buttons. There are standard templates for the default layout and for one with a button pane.

For documentation on the commands see http://keith-wood.name/calendarsPickerRef.html#commandsobj, as the same mechanism is used. The use of commands makes it easy to extend the datepicker (as often requested) with custom buttons. It also associates keystrokes with the commands for keyboard-driven entry.

The common date routines are basically there to support the datepicker functionality but could be extracted into a separate module for more general use. They are: newDate, normaliseDate, daysInMonth, iso8601Week, dayOfYear, add, formatDate, parseDate, determineDate.

The extension module includes less common functionality: weekOfYearRenderer, noWeekends (onDate), changeFirstDay (onShow), hoverCallback (onShow), highlightWeek (onShow), showStatus (onShow).

Please comment on any and all of the features as we want to pin down what is eventually included in the next release.

There's a set of components now available to integrate various jQuery
UI widgets with JSF (JavaServer Faces): http://free.hostingjava.it/-jquery4jsf/index.jsf.
Maybe we need a new section on the Web site to advertise/promote links
to related tools and/or tutorials.

There's a ticket for datepicker (r4083) regarding the position of the
datepicker on opening. I want to gain concensus on how the datepicker
should be positioned before making any changes.
The default position is just below the field and extending to the
right. However if there is not enough room in the viewport to show it
fully it should be repositioned so that it is still visible.
Originally the datepicker moved above the field if not enough space
below, and extended to the left (right edges aligned) if not enough
space to the right. Overriding this was a check to keep the datepicker
within the viewport with regards the top and left edges.
The latest datepicker seems to be centred vertically if not enough
room below the field, and right-aligned with the right viewport edge
if not enough space to the right.
How should the datepicker be positioned?