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

Posted 2023-05-07

【中文标题】jQuery UI Datepicker：如何在特定日期添加可点击事件？

【英文标题】：jQuery UI Datepicker : how to add clickable events on particular dates?

【发布时间】：2011-07-31 11:58:49

【问题描述】：

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

如何将活动日期传递到日历？ 如何使其可点击，或者在小弹出提示中显示事件及其 URL，或者转到事件页面？

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

谢谢。

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

PS2：我将在多语言网站（法语和英语）上使用它，这就是我想到 datepicker 的原因

【问题讨论】：

我认为让事件可点击不是一个好主意。那你会如何选择那个日期呢？ 还有，你是用这个来选日期的吗？如果没有，一些calendar plugin 可能更适合您。

@dancek 不，我没有用它来选择日期。只能访问事件。好的，谢谢，我去看看日历插件。

【参考方案1】：

这绝对是可能的，而且在我看来并没有过多地滥用 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 事件处理程序，您可以在其中告诉日期选择器在单击某一天时要执行的操作：

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/。请务必导航到 2 月/3 月以查看活动。

【讨论】：

安德鲁，以上适用于格式如下的所有日期： mm/dd/yyyy ，有没有办法让它在 dd/mm/yyyy 中工作？

您是否尝试过使用dateFormat 选项？

好人！只是一个问题，如果一个日期有多个事件，我如何提醒？

感谢此代码！非常棒。起初它对我不起作用，然后我意识到最后一个 ); 有一个无效（不可见）字符； （或者它可能已经在我的页面上）。 ***.com/questions/9955242/…

@KatiePatrick：你说得对，小提琴的代码末尾有一个不可见的字符。感谢您的提醒！

【参考方案2】：

除了 Andrew Whitaker 解决方案之外，还有另一种方法（实际上它是一种 hack，但实际上它可能对其他人来说是完美的，因为标题或日期可能并不总是一个好的标识符）

注意：请先阅读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")
    ]);