DateUpicker пользовательского интерфейса jQuery - Как изменить HTML DatePicker - PullRequest
Новая
       5

DateUpicker пользовательского интерфейса jQuery - Как изменить HTML DatePicker

15 голосов
/ 12 июля 2011

Мне нужно внести несколько простых изменений в 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 необходим живой метод, но я не знаю, как подключить живой метод с помощью этого обратного вызова функции. Или я мог бы совсем неправильно подойти к этому.

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

Ответы [ 4 ]

11 голосов
/ 03 сентября 2011

Похоже, вам нужно подождать, пока таблица .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/.

5 голосов
/ 06 июня 2013 
   $('.datepicker').datepicker({ beforeShow: function () {
        setTimeout(appendsomething, 10);
    },
    onChangeMonthYear: function () {
        setTimeout(appendsomething, 10);
        }
    }
    );

var appendsomething = function () {
    $("#ui-datepicker-div").append("<div class='something'>something</div>");
}
4 голосов
/ 19 марта 2014

Я использую следующий трюк для исправления функции _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;
    };
})();

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

0 голосов
/ 25 октября 2016

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

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