Могу ли я получить виджет DatePicker jQuery-ui для отображения дополнительной информации в каждой ячейке?

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';
        }
    }   
}

Я также вызвал функцию после загрузки DatePicker. Это успешно добавляет «a» после каждой ячейки даты, но когда она вызывается как часть события, она вызывается до перезагрузки таблицы с новым годом и месяцем, поэтому не имеет никакого эффекта. Я не знаю, должно ли это произойти, или я делаю что-то не так. Если это должно произойти так, то, я думаю, остается только добавить задержку к функции, чтобы таблица загружалась до ее запуска.

Answer 1

При взгляде на исходный код для средства выбора даты jQuery UI кажется, что рендеринг календаря довольно жестко запрограммирован. Если вы заинтересованы, вы можете увидеть его на Google Code . Однако вы можете установить заголовок на td для каждой даты, используя событие beforeShowDay, например,

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

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

При наведении курсора на дату будет отображаться количество заданий за определенный день. Кроме того, я думаю, вам придется перебирать таблицу, чтобы переместить содержимое атрибута title в содержимое ячейки.