CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Gnuffo1
Gnuffo1

Reputation: 3546

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?

Upvotes: 2

Views: 4425

Answers (3)

dx_over_dt
dx_over_dt

Reputation: 14328

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

Upvotes: 0

Martin Sansone - MiOEE
Martin Sansone - MiOEE

Reputation: 4399

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)

Upvotes: 1

Zacho
Zacho

Reputation: 861

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

Upvotes: 0

Related Questions