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").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/

datepicker-ui点击日期显示弹出窗口

1 个答案: