jQuery UI Datepicker - How to alter Datepicker HTML

user_839825 0
Viewed 12190

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
alert($('#ui-datepicker-div').html());
//#this does nothing
$('#ui-datepicker-div').append('message');          
}

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.

jquery-ui-datepicker jquery-ui jquery
4 Answers

It can be done as simply as this (this works with the new datepicker): 

$('.datepicker').datepicker('show');
$(".ui-datepicker").append(<div>Foo</div>);

$(document).on('click', '.ui-datepicker-next', function () {
    $(".ui-datepicker").append(<div>Foo</div>);
})

$(document).on('click', '.ui-datepicker-prev', function () {
    $(".ui-datepicker").append(<div>Foo</div>);
})
user_51733250
Related