Q: jQuery UI datepicker - add static text underneath the calendar? This is on the one that pops up when you click the linked input element. I want to be able to insert some static text underneath the table of dates that will appear and stay even if the user scrolls to different months.
I managed to sort of getting working by, with jQuery, using
$('.ui-datepicker').after('text');

On the .ui-datepicker class. The problem with that was, it didn't work when the user scrolled to the next month. I managed to fix that as well, by constantly clearing and re-adding the text with setTimeout. That was really hacky, but worked.
The next problem came when I had multiple calendars on the page, each with different texts. I tried targeting specific instances on .ui-datepicker with the above method, but I discovered there is actually only one instance of the datepicker that is shared between all calendar fields on the page.
So is it actually possible?

A: One solution for presenting different texts on multiple datepickers on the same page is to create data holders next to the id/class space of each datepicker location. Then load the data content for the datepicker selected using (this).
Example html code:
The data holder contains the specific text to be displayed for the associated datepicker like so:
<p>Date1: <input type="text" class="datepicker" 
           data-dptxt="the text1 to display in datepicker" ></p>

<p>Date2: <input type="text" class="datepicker" 
           data-dptxt="the Second text to display" ></p>

Example jQuery code:
Then the jQuery text injection into the selected datepicker calendar would be something like this:
$( ".datepicker" ).datepicker()
    .on( "click", function() {
        var dTxt = $( this ).data('dptxt');
    $('.ui-datepicker-calendar').after('<span class="middle">'+dTxt+'</>');
});

I've added a little CSS formatting so that you can easily see the additional semi-dynamic text changing between the two datepickers.
See my working jsFiddle solution in action (images below from the jsFiddle link :)
(source: web-asylum.com)


A: You need create a variable to hold the instance of the datepicker.  So When you create it, do this:
var myDatePicker = $("#myDatePickerElement").datepicker();
myDatePicker.after("text");


A: To get around your "hacky" setTimeout workaround, you can attach click event handlers to the prev and next buttons.  Here's code adapted from Martin's answer.
$(function() {
    function appendText(text) {
        $('.ui-datepicker-calendar').after('<span class="middle">'+lastText+'</>');
    }

    function addClickHandlers() {
        $('.ui-datepicker-prev, .ui-datepicker-next')
            .on('click', function() {
                addClickHandlers();
                appendText();
            });
    }

    var lastText;
    $( ".datepicker" ).datepicker()
        .on( "click", function() {
            lastText = $( this ).data('dptxt');
            appendText();
            addClickHandlers();
        });
});

