Update datepicker tooltip in beforeShowDay

问题

I have a JQuery Datepicker where I'm highlighting dates and adding text to the tooltip successfully. I have something very similar to this tutorial. The issue I'm having is if there are multiple events on the same date the old tooltip is being "overriden" by the event added most recently. I'm expecting there is a way to "append" (something like title+='new event') but I can't find anything on it.

$(document).ready(function() {
var SelectedDates = {};
SelectedDates[new Date('04/05/2014')] = 'event1';
SelectedDates[new Date('04/05/2014')] = 'event2';
SelectedDates[new Date('04/07/2014')] = 'event3';
SelectedDates[new Date('04/07/2014')] = 'event4';

$('#txtDate').datepicker({
    beforeShowDay: function(date) {
        var Highlight = SelectedDates[date];
        if (Highlight) {
            return [true, "Highlighted", Highlight];
        }
        else {
            return [true, '', ''];
        }
    }
    });
});

See fiddle here with working example of the issue:

http://jsfiddle.net/4KFQ4/

The ideal outcome is to have event1event2 as the tooltip in the same cell.

Any help would be appreciated.

回答1:

The problem you're getting comes from your first few lines:

var SelectedDates = {};
SelectedDates[new Date('04/05/2014')] = 'event1';
SelectedDates[new Date('04/05/2014')] = 'event2';
SelectedDates[new Date('04/07/2014')] = 'event3';
SelectedDates[new Date('04/07/2014')] = 'event4';

Here you're saving 'event1' into SelectedDates, then saving 'event2' into the same spot, overwriting the data. What you could do instead is something like this:

SelectedDates[new Date('04/05/2014')] = ['event1'];
SelectedDates[new Date('04/05/2014')].push('event2');
SelectedDates[new Date('04/07/2014')] = ['event3'];
SelectedDates[new Date('04/07/2014')].push('event4');

Obviously, you could simplify this to:

SelectedDates[new Date('04/05/2014')] = ['event1','event2'];
SelectedDates[new Date('04/07/2014')] = ['event3','event4'];

Or whatever makes you most happy.

This will create an array at each specific date with all the events, and the tooltip will then contain each event. Here is an updated fiddle to show you the results: Click Here.

Hopefully this helps!

来源：https://stackoverflow.com/questions/22078629/update-datepicker-tooltip-in-beforeshowday