【问题标题】:Update datepicker tooltip in beforeShowDay在 beforeShowDay 中更新 datepicker 工具提示
【发布时间】:2014-02-27 19:37:51
【问题描述】:

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

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

在此处查看 fiddle 以及该问题的工作示例:

http://jsfiddle.net/4KFQ4/

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

任何帮助将不胜感激。

【问题讨论】:

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


    【解决方案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

    希望这会有所帮助!

    【讨论】:

    • 我接受这个作为我的答案,因为它 100% 解决了我的问题,并且首先是比我尝试做的更清洁的解决方案。谢谢@Thoughtful Thighentist
    猜你喜欢
    • 2017-12-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-17
    • 1970-01-01
    • 2013-01-07
    相关资源
    最近更新 更多