Jquery UI Datepicker не отображается - PullRequest
27 голосов
/ 21 апреля 2010

ОБНОВЛЕНИЕ
Я вернулся к Jquery 1.3.2, и все работает, не уверен, в чем проблема / была, поскольку я не изменил ничего, кроме версий библиотек jquery и ui.
ОБНОВЛЕНИЕ КОНЕЦ

У меня проблема с датщиком JQuery UI . Средство выбора даты присоединяется к классу, и эта часть работает, но средство выбора даты не отображается.

Вот код DatePicker, который я использую, и встроенный стиль, который генерируется, когда я щелкаю в поле ввода с классом ".datepicker"

$('.datepicker').datepicker({dateFormat:'dd/mm/yy'});

display:none;
left:418px;
position:absolute;
top:296px;
z-index:1;

Если я изменяю отображение: нет для отображения: блокировка средства выбора даты работает нормально, за исключением того, что оно не закрывается при выборе даты.

Используемые библиотеки Jquery:

  • jQuery JavaScript Library v1.4.2
  • jQuery UI 1.8 jQuery UI Widget 1.8
  • jQuery UI Mouse 1.8 jQuery UI
  • Позиция 1.8 jQuery UI Draggable 1.8
  • jQuery UI Droppable 1.8 jQuery UI
  • Datepicker 1.8

Ответы [ 20 ]

33 голосов
/ 05 марта 2011

У меня возникла та же проблема, и я обнаружил, что в моем случае причиной было то, что div datepicker почему-то сохраняет класс .ui-helper-hidden-available, который имеет следующий CSS:

.ui-helper-hidden-accessible {
 position: absolute !important;
 clip: rect(1px 1px 1px 1px);
 clip: rect(1px,1px,1px,1px);
}

Я использую размещенные в Google CDN версии jquery, поэтому я не смог изменить код или CSS.Я также пытался изменить z-index без какого-либо успеха.Решение, которое сработало для меня, состояло в том, чтобы вернуть свойству clip для datepicker значение по умолчанию, auto:

$('.date').datepicker();
$('#ui-datepicker-div').css('clip', 'auto');

Поскольку это специально предназначено для div datepicker, меньше вероятность непредвиденных побочных эффектовдругие виджеты, кроме изменения класса ui-helper-hidden-available в целом.

14 голосов
/ 14 сентября 2017

Это может быть полезно для кого-то. Если вы скопировали и вставили данные формы (в которой есть поле ввода datepicker, убедитесь, что не случайно скопировал class = "hasDatepicker"

Это означает, что ваше поле ввода должно выглядеть следующим образом:

<input id="dateChooser" name="dateChooser" type="text" value=""/>

НЕ

<input id="dateChooser" name="dateChooser" type="text" value="" class="hasDatepicker">

Я сделал эту ошибку непреднамеренно. Удаление класса и разрешение вызова пользовательского интерфейса jQuery, казалось, исправили это.

Надеюсь, это кому-нибудь поможет!

11 голосов
/ 21 апреля 2010

это файл css в новом не работает. Попробуйте включить в заголовок старый файл 1.7. * Css и повторите попытку.

Кроме того, вы пытались сделать .datepicker ("show") сразу после его создания?

10 голосов
/ 10 мая 2011

У меня была та же проблема: средство выбора даты было успешно добавлено (и его можно было даже найти в FireBug), но не было видно. Если вы используете FireBug для удаления класса «ui-helper-hidden-available» из элемента выбора даты (идентификатор: «ui-datepicker-div»), то элемент выбора даты станет видимым и будет работать как обычно.

Если вы добавите следующее в самом конце своей функции $ (document) .ready (), она будет применяться к каждому средству выбора даты на вашей странице и заставит их все работать:

$(document).ready(function() {
      //...
      //Put all of you other page setup code here
      //...

      //after setting everything up (including adding all Date Pickers)
      //apply this code to every Date Picker
      $('#ui-datepicker-div').removeClass('ui-helper-hidden-accessible');  
});

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

$(document).ready(function() {
      //...
      //Put all of you other page setup code here
      //...

      //after setting everything up (including adding all Date Pickers)
      //apply this code to every Date Picker
      $('#ui-datepicker-div').css('clip', 'auto');  
});

Надеюсь, это поможет кого-то расклеить.

РЕДАКТИРОВАТЬ: Исправлена ​​ошибка синтаксиса кода.

4 голосов
/ 03 февраля 2012

Пожалуйста, убедитесь, что вы используете ту же версию файлов jquery-ui 'js' и 'css'. Иногда это может быть проблемой.

4 голосов
/ 18 февраля 2015

У меня была похожая проблема с 1.7.2 версиями jQuery и jQuery UI. Всплывающее окно не показывалось, и ни одно из приведенных выше предложений не помогло. Что помогло в моем случае, так это использование class = "hasDatepicker", который (как принято в ответе здесь: jQuery UI datepicker не будет отображаться - полный код включен ) используется jquery-ui, чтобы указать, что DatePicker уже был добавлен в текстовое поле. Жаль, что я нашел этот ответ раньше.

3 голосов
/ 29 июля 2012

У меня была такая же проблема при использовании JQuery-UI 1.8.21 и JQuery-UI 1.8.22.

Проблема была в том, что у меня было два скрипта DatePicker, один из которых был встроен в jquery-ui-1.8.22.custom.min.js , а другой - в jquery.ui.datepicker.js (старая версия перед обновлением до 1.8.21).

Удаление дубликата jquery.ui.datepicker.js , устраните проблему для 1.8.21 и 1.8.22.

2 голосов
/ 17 февраля 2011

Я изменил строку

.ui-helper-hidden-available {position: absolute! Важный; клип: прямоугольник (1px 1px 1px 1px); клип: прямоугольник (1px, 1px, 1px, 1px); }

до

.ui-helper-hidden-available {позиция: абсолютная! Важная; }

и все работает сейчас. В противном случае попробуйте увеличить z-индекс, как предложил Soldierflup.

1 голос
/ 21 апреля 2010

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

1 голос
/ 23 июля 2015

Была та же проблема, что datepicker-DIV был создан, но не заполнялся и не появлялся при нажатии Моя ошибка состояла в том, чтобы дать входу статически класс hasDatepicker. JQuery-UI шляпа, чтобы установить этот класс самостоятельно. тогда это работает для меня.

...