带有事件的日期选择器? [英] Datepicker with events?

问题描述

是否有一个 jquery 插件可以让我有一个像矩形一样的小日历，就像在 datepickers 中一样，并且一些日期会是不同的颜色.当我用鼠标查看日期时，会弹出一个窗口，说明当天安排了什么活动.当然我会用事件填充事件数组;-)

Is there a jquery plugin that would allow me to have a small calendar like rectangle, like in datepickers and some of the dates would be different colour. When I go over the date with mouse there is a popup saying what event is scheduled on that day. Of course I would populate the event array with events ;-)

我只找到日期选择器(小)或日历(全屏大).我的网页需要的是一个小日历和一个简单的鼠标悬停，可以显示我希望它显示的文本.

All I find are the datepickers (small) or calendars (full screen large). What I need for my webpage is there is a small calendar there and a simple mouseover that would show the text that I would like it to show.

这样的东西存在吗?

推荐答案

正如其他人所指出的，这可以通过 jQueryUI 的 日期选择器.

As others have pointed out, this is possible with jQueryUI's datepicker.

Datepicker 有一些内置功能可以帮助您实现目标.具体来说，beforeShowDay 事件可以让您自定义外观和每天的行为，根本不需要太多代码:

Datepicker has some built in functionality that will help you get there. Specifically, the beforeShowDay event will let you customize the appearance and behavior of each day without much code at all:

1. 创建一个对象，其中包含您可以从 datepicker 的事件处理程序中引用的事件:

1. Create an object containing events you can reference from the datepicker's event handler:

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

var events = {};
events[new Date("02/14/2011")] = new Event("Valentines Day", "pink");
events[new Date("02/18/2011")] = new Event("Payday", "green");

这段代码只是创建了一个对象，其中keys"是事件日期，values"是事件数据.

This code just creates an object with "keys" being the event date and "values" being event data.

要让 datepicker 小部件一直显示(例如不需要 input)，只需将小部件应用到 div:

To make the datepicker widget show up all the time (without requiring an input for example), just apply the widget to a div:

HTML:

<div id="dates"></div>

JavaScript:

$("#dates").datepicker({....});

点击 beforeShowDay 事件，并返回适当的数组.datepicker 将自动应用您指定的工具提示和类.这就是我们上面定义的 Event 对象派上用场的地方:

Tap into the beforeShowDay event, and return the appropriate array. datepicker will automatically apply a tooltip and class you specify. This is where the Event objects we defined above come in handy:

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

这可能是最棘手的部分.beforeShowDay 事件处理程序希望您返回一个结构如下的数组:

This is probably the trickiest part. The beforeShowDay event handler expects you to return an array structured like this:

[ 0 ] 等于真/假表示这个日期是否可选择的，[ 1 ] 等于 CSS 类name(s) 或 '' 为默认值演示文稿，以及 [2] 可选此日期的弹出式工具提示.

[ 0 ] equal to true/false indicating whether or not this date is selectable, [ 1 ] equal to a CSS class name(s) or '' for the default presentation, and [ 2 ] an optional popup tooltip for this date.

所以我们正在做的是查找传递给处理 beforeShowDay 事件的函数的日期的事件，并从我们的事件对象返回数据(如果存在).

So what we're doing is looking up the event on the date passed into the function handling the beforeShowDay event and returning the data from our event object, if it exists.

看起来很多，但是当你把它们放在一起看时，它并不算太糟糕.在此处查看示例:http://jsfiddle.net/andrewwhitaker/rMhVz/1/

It looks like alot, but it's not too bad when you look at it all put together. Check out the example here: http://jsfiddle.net/andrewwhitaker/rMhVz/1/

注意CSS类必须使用!important来覆盖datepicker的默认背景，并实际应用到a标签里面日期 trs

Note the CSS classes must use !important to override the default background of the datepicker, and actually apply to the a tags inside of the date trs

这篇关于带有事件的日期选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！