Datepicker事件处理程序

时间:2011-09-21 23:33:50

标签: jquery jquery-ui

我有这个插件到我的日期选择器,但我不希望它给我一个警报箱。 我希望它在日期选择器下显示当天事件的div。

我不知道如何将if(事件)更改为<div>而不是警告。

$(function(){
    var events = [ 
        { Title: "Five K for charity", Date: new Date("09/13/2011") }, 
        { Title: "Dinner", Date: new Date("09/25/2011") }, 
        { Title: "Meeting with manager", Date: new Date("09/01/2011") }
    ];
    $("#datepicker").datepicker({
        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;
        },
        onSelect: function(dateText) {
            var date,
            selectedDate = new Date(dateText),
            i = 0,
            event = null;

            while (i < events.length && !event) {
                date = events[i].Date;

                if (selectedDate.valueOf() === date.valueOf()) {
                    event = events[i];
                }
                i++;
            }
            if (event) {
                alert(event.Title);
            }
        }
    });    
});

1 个答案:

答案 0 :(得分:2)

好吧,我不知道你的标记(html) 但是这就是你如何做到的......

代替alert(event.Title);试试这个:

var eventContainer = ($('#eventContainer').length) ? $('#eventContainer').empty() : $('<div id="eventContainer"></div>');
var eventItem = $('<div/>');
eventItem.text(event.Title);
eventContainer.append(eventItem);
$("#datepicker").after(eventContainer);

修改 我将代码添加到了jsFiddle中,因此您可以自己测试一下 http://jsfiddle.net/ambiguous/TgZQJ/11/