datepicker-ui 点击日期显示弹窗

Question

我在 datepicker ui 日历中添加了一些事件（分配给一个 div，因此它始终可见），每个事件都有一个特定的标题。当点击任何这些特殊日期时，我想在当天上方显示一个带有事件标题的弹出窗口。

var Event = function(text, className) {
this.text = text;
this.className = className; };

var events = {};
events[new Date("02/07/2014")] = new Event("Event01", "highlight");

events[new Date("02/26/2014")] = new Event("Event02", "highlight");
events[new Date("02/27/2014")] = new Event("Event02", "highlight");



$("#datepicker").datepicker({
    beforeShowDay: function(date) {
        var event = events[date];
        if (event) {
            return [true, event.className, event.text];
        }
        else {
            return [true, '', ''];
        }
    }});

http://jsfiddle.net/saisoto/A5mew/

我认为它与 onSelect 有关，但我不知道如何将弹出窗口定位在日期上方。

我可以补充一点，我不希望在页面中弹出警报并让人们点击接受（或关闭）以让他们继续与页面交互

Answer 1

您可以使用onSelect，如果所选日期是特殊日期，则显示警报（或其他内容）。

选择日期选择器时调用。该函数接收 选择日期作为文本，日期选择器实例作为参数。这 指关联的输入字段。

代码：

$("#datepicker").datepicker({
    beforeShowDay: function (date) {
        var event = events[date];
        if (event) {
            return [true, event.className, event.text];
        } else {
            return [true, '', ''];
        }
    },
    onSelect: function (date) {
        var event = events[new Date(date)];
        if (event) {
            alert(event.text)
        }
    }
});

演示：http://jsfiddle.net/IrvinDominin/ajMS6/