jQuery UI datepicker - add static text underneath the calendar?

Question

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

Answer 1

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();
        });
});

Answer 2

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");

Answer 3

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)}