JQuery UI DatePicker - добавить статический текст под календарем?

Question

Это тот, который появляется при нажатии на связанный элемент ввода. Я хочу иметь возможность вставить какой-то статический текст под таблицу дат, которая будет отображаться и сохраняться даже в том случае, если пользователь прокручивает страницы в разные месяцы.

Мне удалось разобраться с JQuery, используя

$('.ui-datepicker').after('text');

На .ui-datepicker класс. Проблема в том, что он не работал, когда пользователь перешел к следующему месяцу. Мне также удалось это исправить, постоянно очищая и снова добавляя текст с помощью setTimeout. Это было действительно хакерски, но сработало.

Следующая проблема возникла, когда у меня было несколько календарей на странице, каждый с разными текстами. Я попытался нацелить определенные экземпляры на .ui-datepicker с помощью вышеуказанного метода, но обнаружил, что на самом деле существует только один экземпляр средства выбора даты, который используется всеми полями календаря на странице.

Так возможно ли это на самом деле?

Answer 1

Одним из решений для представления различных текстов в нескольких средствах выбора даты на одной странице является создание держателей данных рядом с пространством идентификатора / класса в каждом местоположении средства выбора даты.Затем загрузите содержимое данных для средства выбора даты, выбранного с помощью (this).

Пример HTML-кода: Держатель данных содержит определенный текст, который будет отображаться для соответствующего средства выбора даты, например:

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

Пример кода jQuery: Тогда вставка текста jQuery в выбранный календарь выбора даты будет выглядеть примерно так:

$( ".datepicker" ).datepicker()
    .on( "click", function() {
        var dTxt = $( this ).data('dptxt');
    $('.ui-datepicker-calendar').after('<span class="middle">'+dTxt+'</>');
});

Я добавил небольшое форматирование CSS, поэтомучто вы можете легко увидеть дополнительный полудинамический текст, изменяющийся между двумя указателями даты.

См. мое рабочее решение jsFiddle в действии (изображения ниже по ссылке jsFiddle:)

http://web -asylum.com / help-images / datepicker-extra-text-jquery0.jpg http://web -asylum.com / help-images / datepicker-Дополнительные-текст-jquery.jpg

Answer 2

Вам необходимо создать переменную для хранения экземпляра указателя даты. Поэтому, когда вы создадите его, сделайте следующее:

var myDatePicker = $("#myDatePickerElement").datepicker();
myDatePicker.after("text");