Question

How do I add extra line text within the calendar control of the datepicker plugin.

Datepicker opens on the
focus of the date field

click of the date field

click calendar image

I need to add a p tag just below the calendar…is there a way to do that?

Answer 1

You can append the text to the #ui-datepicker-div after the calendar has been rendered. One caveat is that the datepicker tries to find the date being entered in real time, which refreshes the #ui-datepicker-div. The means you need to observe both click and keyup events, and only insert the message if it is not there already.

$('.datepicker').datepicker().bind('click keyup', function() {
    if ($('#ui-datepicker-div :last-child').is('table'))
        $('#ui-datepicker-div').append('<p>hello world</p>');
});

See this in action: http://jsfiddle.net/william/ctqUa/1/.