Переопределить jQuery UI Datepicker div, странно видимый при загрузке первой страницы. - PullRequest
Новая
       29

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

30 голосов
/ 03 января 2011

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

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

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

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

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

bad div

и вот панель Firebug:

css

Ответы [ 7 ]

43 голосов
/ 02 мая 2012

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

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

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

4 голосов
/ 03 января 2011

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

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

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

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

Кстати, в Safari я вижу только первые две вкладки, мне пришлось переключиться на Firefox, чтобы увидеть вкладку "Питание". Как ни странно, в Chrome все работает отлично. Возможно, это не имеет отношения, но я все же хотел, чтобы вы знали.

3 голосов
/ 21 января 2016

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

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

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

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

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

3 голосов
/ 14 октября 2011

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

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

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

.... 

<input type="text" class='date_input' />
2 голосов
/ 03 октября 2012

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

от

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

до: 

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

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

1 голос
/ 04 мая 2015

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

#ui-datepicker-div {z-index:11111;}
1 голос
/ 03 января 2011

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

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

Кстати: классная идея для меню.Мне это нравится.

...