Подтвердить что ты не робот

Переопределить интерфейс jQuery UI Datepicker, видимый странно при загрузке первой страницы.

Что-то странное, здесь:

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

Я использую jQuery UI Datepicker и Accordion на странице. В CSS для пользовательского интерфейса display:none для Datepicker, по-видимому, переопределяется display:block для Аккордеона, по крайней мере, согласно Firebug (см. Img ниже).

Затем, как только триггер Datepicker будет нажат на вкладке "питание/событие" (щелкните одну из кнопок, чтобы показать div с помощью Datepicker), похоже, будет работать display:none.

Вот что выглядит плохой div:

bad div

и здесь панель Firebug:

css

4b9b3361

ОТВЕТЫ

Ответ 1

У меня была та же проблема, и хотя некоторые из вышеперечисленных решений работают, самым простым решением для всех является добавление этого в ваш css:

#ui-datepicker-div {display: none;}

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

Ответ 2

Проблема может заключаться в том, что вы привязываете datepicker к чему-то, что не видно, что объясняет нечетное позиционирование (попытка компенсировать что-то, что не существует, вырождается до смещения от (0,0)). Datepicker <div> должен иметь по крайней мере таблицу внутри него, поэтому, возможно, датпикер запутывается и бросает исключение, прежде чем он завершит инициализацию. Когда вы нажимаете на один из связанных входов, он, вероятно, снова инициализируется (или, по крайней мере, правильно заканчивает инициализацию), и после этого все отлично работает.

Попробуйте привязать datepicker, когда ввод даты становится видимым:

  • Удалите $(".date_picker").datepicker({ disabled: false });
  • Добавьте id="cater" в <input type="text" name="cater"/>
  • Вызовите $('#cater').datepicker();, когда нажата кнопка "зарезервировать событие".

Если это сработает, вам придется добавить похожие хаки для других datepickers. Если это не сработает, я, вероятно, ошибаюсь. Если мое предположение окажется правильным, вы можете сообщить об ошибке для пользователей jQuery-UI.

BTW, в Safari я могу видеть только первые две вкладки, мне пришлось переключиться на Firefox, чтобы увидеть вкладку "питание". Как ни странно, он отлично работает в Chrome. Это, вероятно, не связано, но я думал, что дам вам знать в любом случае.

Ответ 3

В моем случае я использую сессию "$ (document).ready(function() {" JQuery в свою пользу.

Поскольку у меня есть файл JavaScript, загруженный на все страницы моей системы, я просто добавил в него следующую строку.

$('#ui-datepicker-div').css('display', 'none');

Для меня это кажется ясным и элегантным решением, потому что мне не нужно было менять его библиотеку.

Лучше всего, он отлично работает на всех браузерах.:)

Ответ 4

Проблема заключается в том, что элемент datepicker привязан к еще недоступному.

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

$(function() {
  $(".date_input").click(function() {
    $(this).datepicker();
    $(this).datepicker("show");
  });
});

....

<input type="text" class='date_input' />

Ответ 5

У меня была аналогичная проблема в Chrome, и я решил ее редактировать jquery-ui1.7.2.custom.css

от

.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }

to:

.ui-helper-hidden-accessible { position: absolute; left: -9999999px; }

Вероятно, слишком много девяток для Chrome.

Ответ 6

Попробуйте переместить последний блок в нижней части страницы (прямо перед тем, как закрыть тег body). Вы можете узнать больше о том, почему вы хотите сделать это здесь:

http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html

BTW: Прохладная идея для меню. Мне это нравится.

Ответ 7

Иногда это связано с тем, что z-индекс другого элемента на странице выше. Установка z-индекса на очень высокое число решила мою проблему.

#ui-datepicker-div {z-index:11111;}