我可以让 jQuery-ui datepicker 小部件在每个单元格中显示额外的信息吗？

Question

我正在尝试向 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';
        }
    }   
}

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

Answer 1

通过查看 jQuery UI 日期选择器的源代码，看起来日历的渲染是相当硬编码的。如果您有兴趣，可以在google code 上查看。但是，您可以使用 beforeShowDay 事件为每个日期在 td 上设置标题，例如

var taskCounts = { date1: 2, date2: 5, date3: 0, etc, etc }

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

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