Control formatting of the calbox Date Text

This option allows you to add a replacement formatter for the individual dates in the calendar grid display - by default, it is simply the Date (number) with no extra formatting.

This needs to be either a

The function must accept a single argument, which is an object of the Date:

	"Year" : 0, // Integer
	"Month" : 0-11, // Integer, Jan = 0 .. Dec = 11
	"Date" : 1-31, // Integer
	"ISO" : YYYY-MM-DD, // ISO Date Representation
	"Comp" : YYYYMMDD, // Little endian date compare representation
	"dateVisible" : bool, // Selected date is on the screen
	"curYear": 0, // Integer, the *displayed* year
	"curMonth": 0-11, // Integer, the *displayed* month

The function can return either just a String/Number, or an object of the type:

	"text": "Text or HTML to display",
	"class": "myClass1 myClass2" // List of classes to add to grid box

The return value is parsed for each value, so you can return an object only where necessary if you prefer. As usual, the easiest method of passing the function in is as a reference. This sample function will italicize the “tens” dates (10 - 19) - although it is pretty much useless, it gives the idea:

window.myFormatter = function( date ) {
	if ( date.Date > 9 && date.Date < 20 ) {
		return { 
			text: "<i>" + date.Date + "</i>",
			"class": "makeItRed"
	} else {
		return date.Date;

Then, to link it to datebox, it could be as easy as:

<input type="text" data-role="datebox" data-datebox-mode="calbox" data-datebox-calFormatter="myFormatter">

Dynamically changing the function:

Admittedly, the function below is probably even more useless than the first one, but it demonstrates the principle:

$('#datebox_input_element').datebox({ 'calFormatter': function( date ) { return date.Month; } });

Data Type Expected


Default Vaule


Option is Dynamic Post Initialization


Valid Modes


Valid Frameworks