JQuery UI Datepicker - Как изменить Datepicker HTML

Мне нужно сделать несколько простых изменений в HTML Datepicker, сгенерированных jQuery UI Datepicker, например. добавив короткий текст после таблицы календаря.

Я пытаюсь сделать это, используя событие beforeShow, но пока я могу получить доступ к текущему HTML, используя это, манипулирование им не работает:

beforeShow: function(input, inst) {
//#this works
alert($('#ui-datepicker-div').html());
//#this does nothing
$('#ui-datepicker-div').append('message');          
}

Я думаю, что это может быть связано с тем, что HTML-элементы Datepicker добавляются в Dom позже, поэтому для обновления HTML требуется живой метод, но я не знаю, как подключить живой метод с помощью этой функции. Или я вполне мог бы приблизиться к этому совсем не так.

Я был бы очень признателен, если бы кто-то помог мне справиться с этим, поскольку я искал и пробовал много чего, но я не могу заставить это работать. Спасибо.

Ответ 1

Кажется, вам нужно подождать, пока таблица .ui-datepicker-calendar не будет вставлена в #ui-datepicker-div, чтобы добавить ваше сообщение. Вы можете сделать таймер, чтобы проверить это:

$('#datepicker').datepicker({
    beforeShow: function(input, inst) {
        insertMessage();
    }
});

// listen to the Prev and Next buttons
$('#ui-datepicker-div').delegate('.ui-datepicker-prev, .ui-datepicker-next', 'click', insertMessage);

function insertMessage() {
    clearTimeout(insertMessage.timer);

    if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible'))
        $('#ui-datepicker-div').append('<div>foo</div>');
    else
        insertMessage.timer = setTimeout(insertMessage, 10);
}

~~Посмотрите в действии: http://jsfiddle.net/william/M9Z7T/2/.~~

Смотрите в действии: http://jsfiddle.net/M9Z7T/126/.

Ответ 2

   $('.datepicker').datepicker({ beforeShow: function () {
        setTimeout(appendsomething, 10);
    },
    onChangeMonthYear: function () {
        setTimeout(appendsomething, 10);
        }
    }
    );

var appendsomething = function () {
    $("#ui-datepicker-div").append("<div class='something'>something</div>");
}

Ответ 3

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

(function () {
    $.datepicker._generateHTML_old = $.datepicker._generateHTML;
    $.datepicker._generateHTML = function (inst) {
        var html = this._generateHTML_old(inst);
        html = html.replace(/<a class="(ui-datepicker-prev ui-corner-all)( ui-state-disabled)?"/, '<a class="$1 ui-btn ui-btn-left ui-icon-carat-l ui-btn-icon-notext$2"');
        html = html.replace(/<a class="(ui-datepicker-next ui-corner-all)( ui-state-disabled)?"/, '<a class="$1 ui-btn ui-btn-right ui-icon-carat-r ui-btn-icon-notext$2"');
        html = html.replace(/<span class="ui-icon ui-icon-circle-triangle-.">(.+?)<\/span>/g, '$1');
        return html;
    };
})();

Изменить: использование функций regex/string для редактирования HTML на самом деле - плохая идея. Рассмотрите возможность размещения HTML внутри элемента, управления и захвата полученного HTML.

Ответ 4

Это можно сделать так же просто, как это (это работает с новым datepicker):

$('.datepicker').datepicker('show');
$(".ui-datepicker").append(<div>Foo</div>);

$(document).on('click', '.ui-datepicker-next', function () {
    $(".ui-datepicker").append(<div>Foo</div>);
})

$(document).on('click', '.ui-datepicker-prev', function () {
    $(".ui-datepicker").append(<div>Foo</div>);
})