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

前端之家收集整理的这篇文章主要介绍了jQuery UI Datepicker:如何在特定日期添加可点击事件?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想强调jquery datepicker上有附加事件的日期(我不是在说js事件,但现实生活事件:D)。

>如何将事件日期传递到日历?
>如何让它可点击,要在一个小的弹出提示显示事件和他们的URL,要么去事件页面

是否已经有可用的插件或资源(如教程)来帮助我实现呢?

谢谢。

PS:我没有使用日期选择器来选择日期,只能访问附加到日期的事件

PS2:我会在多语言网站(fr和english)上使用它,这就是为什么我想到datepicker

解决方法

这是绝对可能的,在我看来,不是太多的滥用日期选择器小部件。有一个选项来初始化窗口小部件,它可以用于上面描述的场景。

有几个步骤,你必须采取:

>在内部初始化datepicker。将日期控件小部件附加到< div>因此它将始终显示,您不必将其附加到输入:

$("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;
},

这可能看起来有点复杂,但它所做的是突出显示datepicker中的日期,它们在上面定义的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/.确保导航到2月/ 3月查看事件。

原文链接:https://www.f2er.com/jquery/184901.html

猜你在找的jQuery相关文章