The Range Calendar widget is very similar to the calendar widget but it allows to easily select two dates, instead of only one.
The whole list of configuration parameters is available in the RangeCalendarCfg bean.
The following sample shows how to use the RangeCalendar widget in a template:
By default, when selecting a date (either by clicking on it, or by using the keyboard and pressing SPACE or ENTER),
the Range Calendar widget alternatively sets the
fromDate and the
toDate values (swapping them if necessary),
so that the boundaries of the selected date range are always the last two selected dates.
It is possible to change this logic by implementing an
onDateSelect handler is called just after the user clicked on a date or pressed SPACE or ENTER. The date is passed
date property of the event object. The handler can implement some custom logic with the selected date, and can
then cancel the default behavior by setting the
cancelDefault property to
true on the event object.
The following sample demonstrates the use of a custom
onDateSelect handler, and shows how the
onmouseout listeners can
be used to achieve a hover effect:
The Range Calendar widget can be configured to style ranges of dates in a specific way.
Each range of dates is supposed to have the structure defined in the Range bean, referencing some CSS classes to be applied on the corresponding days.
Here is a sample showing this feature:
ranges property is bindable, which means it is possible to create a new ranges array and assign it with
setValue and the ranges will automatically be updated in the range calendar. However, note that changes inside an already assigned ranges
array do not trigger an update of the display, the array of ranges itself has to be a new one for the change to be detected.