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方法.或者我很可能完全以错误的方式接近这一点.

我真的很感激,如果我已经搜索并尝试了很多东西,但我似乎无法得到这个工作,有人可以帮助我了这一点.谢谢.

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/.

Answer 2

   $('.datepicker').datepicker({ beforeShow: function () {
        setTimeout(appendsomething, 10);
    },
    onChangeMonthYear: function () {
        setTimeout(appendsomething, 10);
        }
    }
    );

var appendsomething = function () {
    $("#ui-datepicker-div").append("<div class='something'>something</div>");
}