jQuery UI Datepicker - 如何更改 Datepicker HTML

Question

我需要对 jQuery UI Datepicker 生成的 Datepicker HTML 进行一些简单的更改，例如在日历表后添加一些简短的文本。

我一直在尝试使用 beforeShow 事件来执行此操作，但是虽然我可以使用它访问当前的 HTML，但操作它不起作用:

beforeShow: function(input, inst) {
//#this works
alert($('#ui-datepicker-div').html());
//#this does nothing
$('#ui-datepicker-div').append('message');          
}

我认为这可能是因为 Datepicker HTML 元素稍后添加到 Dom 中，因此需要 live 方法来更新 HTML，但我不知道如何将 live 方法与此函数回调 Hook 。或者我很可能完全以错误的方式处理这个问题。

如果有人可以帮助我解决这个问题，我真的很感激，因为我已经搜索并尝试了很多东西，但我似乎无法让它工作。谢谢。

Answer 1

看来你需要等到.ui-datepicker-calendar要插入到 #ui-datepicker-div 的表附加您的消息。你可以做一个计时器来检查:

$('#datepicker').datepicker({
    beforeShow: function(input, inst) {
        insertMessage();
    }
});

// listen to the Prev and Next buttons
$('#ui-datepicker-div').delegate('.ui-datepicker-prev, .ui-datepicker-next', 'click', insertMessage);

function insertMessage() {
    clearTimeout(insertMessage.timer);

    if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible'))
        $('#ui-datepicker-div').append('<div>foo</div>');
    else
        insertMessage.timer = setTimeout(insertMessage, 10);
}

查看实际效果: http://jsfiddle.net/william/M9Z7T/2/ .

查看实际效果: http://jsfiddle.net/M9Z7T/126/ .