Selecting Years in the Calendar Control

The YUI Calendar Control's default user interface is tailored for a specific interaction pattern: date selection of one or more dates that are localized within the span of a few months. As such, it provides month-by-month navigation but not year-by-year navigation. This UI is suitable for its intended use case but not for use cases wherein users will be selecting dates that are widely spaced across many months or years.

The Calendar Control can easily be configured to provide alternative interfaces that allow for quick year-selection; this example explores the construction of one such interface.

In this example, we'll use a simple <select> menu to allow for the selection of a specific year across a wide range (1963-2019). We'll include navigation arrows to the left and right of the <select> to provide year-by-year clickthrough in that same range. Here is our markup for the navigation control:

<a id="prevyear"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/tr/callt.gif"></a>
<select name="yearselect" id="yearselect">
<option value='1963'>1963</option>
...
<option value='2019'>2019</option>
</select>
<a id="nextyear"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/tr/calrt.gif"></a>

Next, we instantiate a CalendarGroup whose mindate and maxdate configurations match our intended range:

var myCal = new YAHOO.widget.CalendarGroup("newcalelement",
	"calendarcontrol",
	{
	  mindate: "1/1/1963",
	  maxdate: "12/31/2019" }
	);

We need a function that will keep our <select> menu in sync with the year displayed on the first page of our two-page CalendarGroup. We can do that by monitoring the renderEvent, which fires when the calendar is initially displayed and when a user pages to a new calendar month; we'll check an arbitrary date in the middle of the first page (cell 17, in this case) and set our <select> menu to the appropriate year whenever the page changes:

//our syncing function:
var syncyear = function(type) {
	//update the select menu to verify that we're displaying
	//the correct year
	YAHOO.util.Dom.get("yearselect").value = parseInt(
		myCal.pages[0].getDateByCellId("newcalelement_0_cell17").getFullYear()
	);
}
//we sync whenever the calendar renders:
myCal.renderEvent.subscribe(syncyear);
myCal.render();

When the user selects a new year using the <select> menu, we need to navigate to that year; we do that using the Calendar Control's setYear() method (which works both for Calendar and for CalendarGroup). We create a function to listen for a change in the <select>; when that event fires we simply set the year to the <select> field's new value.

var changeYear = function() {
	//get the value of the <select> menu as an integer, send to setYear:
	myCal.setYear(parseInt(YAHOO.util.Dom.get("yearselect").value));
	//have to rerender to make this visible:
	myCal.render();
}
//wire up the change event using Event Utility:
YAHOO.util.Event.addListener("yearselect", "change", changeYear);

We can wire up our "next year" button using Calendar's nextYear() method. We'll write a quick check and only do the navigation if we're not at the end of our prescribed range. Here's the code for navigating forward; going backward, of course, is very similar (uses previousYear() instead).

var nextyear = function(e) {
	//check the current year of the first month page; if we're
	//already at the end of our range, then do nothing. Otherwise,
	//navigate forward:
	if (myCal.pages[0].getDateByCellId("newcalelement_0_cell17").getFullYear() <2019) {
		myCal.nextYear();
	}
}
YAHOO.util.Event.addListener("nextyear", "click", nextyear);

In this example, we have some additional markup containing the navigation controls and an extra step where we append those controls to the Calendar's DOM structure once it has been rendered. In a more advanced implementation, we could subclass Calendar to build in these behaviors. But the pieces above illustrate some of the strategies you can use to wire year-navigation into your existing Calendar implementation.

— Eric Miraglia, Yahoo Presentation Platform Engineering