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

Question

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

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

<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 calendar будет примерно таким:

$(".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-extra-text-jquery.jpg