本文介绍了jQuery UI Datepicker-如何更改Datepicker HTML的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I need to make a few simple changes to the Datepicker HTML generated by the jQuery UI Datepicker e.g. adding some brief text after the calendar table.

我一直在尝试使用beforeShow事件来执行此操作,但是虽然我可以使用此事件来访问当前的HTML,但无法对其进行操作:

I have been trying to do this using the beforeShow event, but while I can access the current HTML using this, manipulating it does not work:

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方法.否则我很可能会完全以错误的方式来解决这个问题.

I think this might be because the Datepicker HTML elements are added to the Dom later and therefore the live method is needed to update the HTML, but I do not know how to hook up the live method with this function callback. Or I could well be approaching this in the wrong way altogether.

如果有人可以帮助我解决这一问题,我将非常感激,因为我已经搜索并尝试了很多东西,但似乎无法正常工作.谢谢.

I would really appreciate if someone could help me out with this as I have searched and tried a lot of things but I can't seem to get this working. Thanks.

推荐答案

似乎您需要等待,直到将.ui-datepicker-calendar表插入到#ui-datepicker-div中以附加您的消息.您可以设置一个计时器来检查:

It seems like you need to wait till the .ui-datepicker-calendar table to be inserted into the #ui-datepicker-div to append your message. You could do a timer to check for that:

$('#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/M9Z7T/126/.

这篇关于jQuery UI Datepicker-如何更改Datepicker HTML的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 04:03