Вопрос по jquery – JQuery UI DatePicker: Как обернуть DatePicker в новый div?

3

Мне нужно поместить свой указатель даты в новый div, который будет (shadow-) border-div.

Я пробовал следующее:

beforeShow: function (input) {
  $(input).datepicker("widget")
   .find(".ui-datepicker-header, ui-datepicker-calendar")
   .wrapAll("<div class='datepickerBorder'/>");
}

Но это не работает.

Кроме того, я пытался обернуть весь сборщик, но затем у границы раздела есть то же положение, размер и т. Д.

Может кто-нибудь помочь, пожалуйста?

Вы имеете в виду сам элемент datepicker (календарь)? VisioN
Я имею в виду саму программу выбора даты. Но когда я обертываю сам инструмент выбора, то у border-div не совпадают положение, размер и т. Д. Инструмента выбора даты. Из-за этого я подумал об обертывании дочерних элементов. Keith L.

Ваш Ответ

2   ответа
5

го внутрь элемента не будуcontain DatePicker внутри этого элемента - элемент-обертка будет располагаться внизу страницы, а DatePicker будет отображаться рядом с элементом управления.

Решение 1. Вы можете добавить класс к самому виджету выбора даты:

$("#datepicker2").datepicker({
    beforeShow: function() {
        $(this).datepicker("widget").addClass("datepickerBorder");
    },
    onClose: function() {
        $(this).datepicker("widget").removeClass("datepickerBorder");
    }
});
demo

Решение 2: создайте абсолютно позиционированный + скрытый упаковочный div при загрузке DOM и измените положение + измените размер div за указателем даты, когда он отобразится. Подвох: вы не можете проверить смещение виджета (координаты, при которых он будет отображаться) внутриbeforeShow функция.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded.ui-datepicker { border:solid 10px red; } jsfiddle.net/VxNQW
Error: User Rate Limit Exceeded Keith L.
Error: User Rate Limit Exceeded Keith L.
3
$('#datepicker').wrap('<div class="datepickerBorder"/>');

#datepicker этоid поля ввода datepicker, у вас может быть что-то еще.

Проверьте jQuery.заворачивать().

Вам не нужно делать это в течениеbeforeShow(), Сделайте это в рамках функции DOM ready.

Обернуть каждый внутренний элементdatepicker тебе стоит попробовать

$('div#ui-datepicker-div > *').wrap('<div class='datepickerBorder'/>');
Error: User Rate Limit Exceeded Keith L.
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededsuckmypic.net/5sUoo9sm.pngError: User Rate Limit Exceeded Keith L.

Похожие вопросы