jQuery Datepicker onChangeMonthYear append

Question

у меня следующая проблема. У меня есть jquery Datepicker и я хочу отображать дополнительную информацию, когда открывается DatePicker. Когда я делаю следующее, используя консоль Firebug, она работает как положено

$("#ui-datepicker-div").append("additional text");

Но когда я делаю то же самое, используя "onChangeMonthYear" -Опция:

$( "#datepicker" ).datepicker({
    onChangeMonthYear: function(year, month, inst) {
        $("#ui-datepicker-div").append("additional text");
    }
});

Не отображается «дополнительный текст».

Есть предложения?!

Спасибо

Answer 1

Проблема в том, что когда срабатывает событие onChangeMonthYear, новая таблица календаря еще не создана. Таким образом, он добавляет текст, но затем весь контент заменяется новой таблицей.

Используйте время ожидания для добавления вашего текста, это обеспечит повторное создание контента плагином перед добавлением.

var appendTimeout;

function appendText(text) {
    clearTimeout(appendTimeout);
    appendTimeout= setTimeout(function() {
        $('#ui-datepicker-div').append('<div>' + text + '</div>');
    }, 50);
}

$("#datepicker").datepicker({
    beforeShow: function() {
        appendText('initialAppendedText');
    },
    onChangeMonthYear: function(year, month, inst) {
        appendText('whenMonthIsChanged');
    }
});

Я установил тайм-аут 10 мс, но вы можете немного увеличить это значение.

Рабочий пример для jsfiddle

Answer 2

'# ui-datepicker-div' создается сценарием datepicker и может обновляться всякий раз, когда хочет datepicked.Добавленный туда текст может быть переписан в любое время.Вы должны создать свой собственный заполнитель вне элемента '#datepicker', добавить туда текст и расположить его так, чтобы он выглядел правильно.

Answer 3

Попробуйте

var changed = false;

$( "#datepicker" ).datepicker({
    onChangeMonthYear: function(year, month, inst) {
        changed = true;
    }
});

 if(changed) {
        $("#ui-datepicker-div").append("additional text");
 }