Improve beforeShowDay option to be a bit more extensible in the future

Author: eternicode

README.md

@@ -208,9 +208,17 @@ Whether or not to force parsing of the input value when the picker is closed.  T
 
 ### beforeShowDay
 
-Function.  Default: null
+Function(Date).  Default: $.noop
 
-A function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name or  null for the default presentation.
+A function that takes a date as a parameter and returns one of the following values:
+
+ * undefined to have no effect
+ * A Boolean, indicating whether or not this date is selectable
+ * A String representing additional CSS classes to apply to the date's cell
+ * An object with the following properties:
+   * `enabled`: same as the Boolean value above
+   * `classes`: same as the String value above
+   * `tooltip`: a tooltip to apply to this date, via the `title` HTML attribute
 
 ## Markup
 

js/bootstrap-datepicker.js

@@ -113,7 +113,7 @@
 		this.startDate = -Infinity;
 		this.endDate = Infinity;
 		this.daysOfWeekDisabled = [];
-		this.beforeShowDay = options.beforeShowDay;
+		this.beforeShowDay = options.beforeShowDay || $.noop;
 		this.setStartDate(options.startDate||this.element.data('date-startdate'));
 		this.setEndDate(options.endDate||this.element.data('date-enddate'));
 		this.setDaysOfWeekDisabled(options.daysOfWeekDisabled||this.element.data('date-days-of-week-disabled'));
@@ -365,7 +365,8 @@
 				endYear = this.endDate !== Infinity ? this.endDate.getUTCFullYear() : Infinity,
 				endMonth = this.endDate !== Infinity ? this.endDate.getUTCMonth() : Infinity,
 				currentDate = this.date && this.date.valueOf(),
-				today = new Date();
+				today = new Date(),
+				tooltip;
 			this.picker.find('.datepicker-days thead th:eq(1)')
 						.text(dates[this.language].months[month]+' '+year);
 			this.picker.find('tfoot th.today')
@@ -407,19 +408,21 @@
 					clsName += ' disabled';
 				}
 
-				if (!!this.beforeShowDay) {
-					var beforeShowDay = this.beforeShowDay(prevMonth);
-					if (!!beforeShowDay) {
-						if (!beforeShowDay[0]) {
-							clsName += ' disabled';
-						}
-						if (!!beforeShowDay[1] && beforeShowDay[1] != '') {
-							clsName += ' ' + beforeShowDay[1];
-						}
-					}
-				}
+				var before = this.beforeShowDay(prevMonth);
+				if (before === undefined)
+					before = {};
+				if (typeof(before) === 'boolean')
+					before = {enabled: before};
+				else if (typeof(before) === 'string')
+					before = {classes: before};
+				if (before.enabled === false)
+					clsName += ' disabled';
+				if (before.classes)
+					clsName += ' ' + before.classes;
+				if (before.tooltip)
+					tooltip = before.tooltip;
 
-				html.push('<td class="day'+clsName+'">'+prevMonth.getUTCDate() + '</td>');
+				html.push('<td class="day'+clsName+'"' + (tooltip ? 'title="'+tooltip+'"' : '') + '>'+prevMonth.getUTCDate() + '</td>');
 				if (prevMonth.getUTCDay() == this.weekEnd) {
 					html.push('</tr>');
 				}

tests/suites/options.js

@@ -288,18 +288,23 @@ test('BeforeShowDay', function(){
 
     var beforeShowDay = function(date) {
         var dateTime = UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()).getTime();
+        var dateTime25th = UTCDate(2012, 9, 25).getTime();
         var dateTime26th = UTCDate(2012, 9, 26).getTime();
         var dateTime27th = UTCDate(2012, 9, 27).getTime();
         var dateTime28th = UTCDate(2012, 9, 28).getTime();
 
-        if (dateTime == dateTime26th) {
-            return [true, 'test26'];
-        } else if (dateTime == dateTime27th) {
-            return [false, 'test27'];
-        } else if (dateTime == dateTime28th) {
-            return [false, null];
+        if (dateTime == dateTime25th) {
+            return {tooltip: 'A tooltip'};
+        }
+        else if (dateTime == dateTime26th) {
+            return 'test26';
+        }
+        else if (dateTime == dateTime27th) {
+            return {enabled: false, classes:'test27'};
+        }
+        else if (dateTime == dateTime28th) {
+            return false;
         }
-        return [true, null];
     };
 
     var input = $('<input />')
@@ -315,6 +320,9 @@ test('BeforeShowDay', function(){
 
 
     input.focus();
+    target = picker.find('.datepicker-days tbody td:nth(25)');
+    equal(target.attr('title'), 'A tooltip', '25th has tooltip');
+    ok(!target.hasClass('disabled'), '25th is enabled');
     target = picker.find('.datepicker-days tbody td:nth(26)');
     ok(target.hasClass('test26'), '26th has test26 class');
     ok(!target.hasClass('disabled'), '26th is enabled');