我可以获取jQuery-ui datepicker小部件来在每个单元格中显示额外信息吗?

时间:2012-01-06 11:43:22

标签: jquery datepicker

我正在尝试向datepicker小部件中的每个日期单元格添加信息(主要是当天计划任务的数量。只是想知道它是否完全可能,我甚至会在哪里开始这样做?

我知道我可以走桌子并单独更换每个单元格,但我想知道是否可以在窗口小部件加载时添加它们。

此外,如果我必须在加载后更换单元格,如何在更改月份后再次执行此操作?

我为onChangeMonthYear事件实现了一个名为modify_datepicker()的函数

onChangeMonthYear: function(year, month, inst) { modify_datepicker() }...


function modify_datepicker() {
    var div_datepicker = document.getElementsByClassName("ui-datepicker-calendar")[0];
    alert(div_datepicker.childNodes[1].tagName);
    var tbody = div_datepicker.childNodes[1];
    var truri = tbody.childNodes;
    for(var i = 0; i < truri.length; i++) {
        tduri = truri[i].childNodes;
        for(var j = 0; j < tduri.length; j++) {
            tduri[j].innerHTML = tduri[j].innerHTML + 'a';
        }
    }   
}

我在加载datepicker后也调用了该函数。这会在每个日期单元格之后成功添加“a”,但是当它作为事件的一部分被调用时,它会在表重新加载新年份和月份之前调用,因此它不起作用。我不知道它是否应该发生这样或者我做错了什么。如果它应该像那样发生那么我想剩下的唯一的事情是为函数添加一个延迟,以便在启动之前加载表。

1 个答案:

答案 0 :(得分:3)

从查看jQuery UI datepicker的源代码看起来,日历的呈现非常难以编码。如果您有兴趣,可以在google code上看到它。但是,您可以使用beforeShowDay事件(例如

)为每个日期在td上设置标题
var taskCounts = { date1: 2, date2: 5, date3: 0, etc, etc }

$('.datepicker').datepicker({
    beforeShowDay: function(date) { [true, '', taskCounts[date] ] }
});

将鼠标悬停在该日期将显示给定日期的任务数。除此之外,我认为你必须遍历表格,将title属性的内容移动到单元格的内容中。