带事件的日期选择器? [英] Datepicker with events?
问题描述
是否有一个 jquery 插件可以让我有一个像矩形这样的小日历,就像在日期选择器中一样,有些日期会是不同的颜色.当我用鼠标查看日期时,会弹出一个窗口,说明当天安排了什么活动.当然我会用事件填充事件数组;-)
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:
创建一个包含可以从
datepicker
的事件处理程序中引用的事件的对象:
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");
这段代码只是创建了一个对象,其中键"是事件日期,值"是事件数据.
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 ] 等于真/假表示无论这个日期是selectable, [ 1 ] 等于一个 CSS 类名称或 '' 作为默认值演示文稿和 [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
标签日期 tr
s
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 tr
s
这篇关于带事件的日期选择器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!