Question

我想在jquery datepicker上突出显示附加事件的日期（我不是在谈论js事件，而是现实生活事件：D）。

如何将活动日期传递给日历？
如何使其可点击，要么在一个小弹出提示中显示带有网址的事件，要么转到活动页面？

是否有可用的插件或资源（如教程）来帮助我实现这一目标？

感谢。

PS：我没有使用日期选择器来选择日期，只是为了访问附加到日期的事件

PS2：我会在多语种网站（fr和英文）上使用它，这就是为什么我想到了datepicker

Answer 1

这绝对是可能的，而且在我看来，滥用datepicker小部件并不是太多。可以选择在线初始化窗口小部件，这可以完全用于上面描述的场景。

您需要采取以下几个步骤：

在线初始化datepicker。将datepicker小部件附加到<div>，以便它始终显示，您不必将其附加到input：
```
$("div").datepicker({...});
```

点按beforeShowDay事件以突出显示特定事件的日期。此外，在数组中定义您可以填充并发送给客户端的事件：

事件数组：

var events = [ 
    { Title: "Five K for charity", Date: new Date("02/13/2011") }, 
    { Title: "Dinner", Date: new Date("02/25/2011") }, 
    { Title: "Meeting with manager", Date: new Date("03/01/2011") }
];

事件处理程序：

beforeShowDay: function(date) {
    var result = [true, '', null];
    var matching = $.grep(events, function(event) {
        return event.Date.valueOf() === date.valueOf();
    });

    if (matching.length) {
        result = [true, 'highlight', null];
    }
    return result;
},

这可能看起来有点复杂，但它所做的只是突出显示日期选择器中的日期，这些日期在上面定义的events数组中有条目。

定义一个onSelect事件处理程序，您可以在其中告诉datepicker在点击一天时要执行的操作：

onSelect: function(dateText) {
    var date,
        selectedDate = new Date(dateText),
        i = 0,
        event = null;

    /* Determine if the user clicked an event: */
    while (i < events.length && !event) {
        date = events[i].Date;

        if (selectedDate.valueOf() === date.valueOf()) {
            event = events[i];
        }
        i++;
    }
    if (event) {
        /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
        alert(event.Title);
    }
}

同样，它看起来像很多代码，但所有发生的事情都是我们发现与点击日期相关的事件。在我们找到该事件后，您可以采取您想要的任何操作（例如，显示工具提示）

以下是一个完整的工作示例：http://jsfiddle.net/Zrz9t/1151/。确保导航到二月/三月以查看事件。

Answer 2

除了安德鲁·惠特克解决方案之外，还有另一种方法可以做到这一点（实际上它是一个黑客但实际上它可能对其他人来说很完美，因为标题或日期可能并不总是一个好的标识符）< / p>

注意：请先阅读 Andrew Whitaker 解决方案，然后在此处查看更改

// date picker
$("div").datepicker({
    // hook handler
    beforeShowDay: function(tdate) {
        var mydata = $(this).data("mydata");
        var enabled = false;
        var classes = "";
        var title = date;
        $.each(mydata, function() {
            if (this.date.valueOf() === tdate.valueOf()){
                enabled = true;
                classes = "highlight";
                title = title + '" data-id ="'+this.id;// my hack to add additional attributes ;)
            }
        });        
        return [enabled,classes,title];
    },
    // event handler
    onSelect: function() {
        var id = $(this).find(".ui-datepicker-current-day").attr("data-id");
        mydata = $(this).data("mydata"),
        selectedData = null;        
        /* search for data id */
        $.each(mydata,function(){
            if (this.id == id){
                selectedData = this;
            }
        });
        if (selectedData) {
            /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
            alert(selectedData);
        }
    }
}).data("mydata",
    // your data
    [{
        id:1,
        title: "Five K for charity", 
        date: new Date("02/13/2011")
    }, 
    {
        id:2,
        title: "Dinner", 
        date: new Date("02/25/2011")
    }, 
    {
        id:3,
        title: "Meeting with manager", 
        date: new Date("03/01/2011")
    }]);

jQuery UI Datepicker：如何在特定日期添加可点击事件？

2 个答案: