在beforeShowDay中更新datepicker工具提示

时间:2014-02-27 19:37:52

标签: javascript jquery jquery-ui datepicker jquery-ui-datepicker

我有一个JQuery Datepicker,我突出显示日期并成功地向工具提示添加文本。我有一些与this tutorial非常相似的东西。我遇到的问题是,如果在同一天有多个事件,旧工具提示被最近添加的事件“覆盖”。我期待有一种方法可以“追加”(类似于标题+ ='新事件'),但我找不到任何内容。

$(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, '', ''];
        }
    }
    });
});

请参阅此处的问题以及该问题的工作示例:

http://jsfiddle.net/4KFQ4/

理想的结果是将event1event2作为同一单元格中的工具提示。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:1)

您遇到的问题来自前几行:

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';

在此您将'event1'保存到SelectedDates,然后将'event2'保存到同一位置,覆盖数据。你可以做的是这样的事情:

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');

显然,您可以将其简化为:

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

或任何让你最开心的事。

这将在每个特定日期创建一个包含所有事件的数组,然后工具提示将包含每个事件。这是一个更新的小提示,向您显示结果:Click Here

希望这有帮助!