Tidy Tidy - 4 months ago 44
jQuery Question

jQuery UI Datepicker - How to alter 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.

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
//#this does nothing

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.


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:

    beforeShow: function(input, inst) {

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

function insertMessage() {

    if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible'))
        insertMessage.timer = setTimeout(insertMessage, 10);

See it in action: http://jsfiddle.net/william/M9Z7T/2/.

See it in action: http://jsfiddle.net/M9Z7T/126/.