JQuery UI Datepicker не отображается

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

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

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

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

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

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

Если вы добавляете в самом конце $(документ).функция 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');  
});

надеюсь, это поможет кому-то отклеиться.

изменить: Исправлена ошибка синтаксиса кода.

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

Это означает, что поле ввода должно выглядеть так:

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

не

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

Я сделал эту ошибку по неосторожности. Удаление класса и разрешение вызова jQuery UI появилось, чтобы исправить это.

надеюсь, что кто-то поможет!

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

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

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

проблема была в том, что у меня было два сценария DatePicker, один встроенный с jquery-ui-1.8.22.традиция.минута.js и С помощью jQuery.пользовательский интерфейс.элемент управления datepicker.js (старая версия перед обновлением до 1.8.21).

удалить дублировать С помощью jQuery.пользовательский интерфейс.элемент управления datepicker.js, решить проблему для 1.8.21 и 1.8.22.

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

.ui-helper-hidden-доступный { позиция: абсолютная !важно; клип: прямоугольник(1 пиксел 1 пиксел 1 пиксел 1 пиксел); клип: прямоугольник(1 пикселей,1 пиксель,1 пикселей,1 пиксель); }

до

.ui-helper-hidden-доступный { позиция: абсолютная !важно; }

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

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

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

Если у вас возникла эта проблема при работе с панелью управления WordPress и использовании темы, сгенерированной ThemeRoller - убедитесь, что вы используете 1.7.3 версию темы, 1.8.13 не будет работать. (Если вы посмотрите внимательно, элемент отображается, но .ui-helper-hidden-accessible заставляет его не отображаться.

текущая версия WP: 3.1.3

Это немного другая проблема. Со мной выбор даты будет отображаться, но css не загружается.

я исправил это: перезагрузите тему (перейдите в jQuery ui css, строка 43 и скопируйте url-адрес, чтобы отредактировать тему themeroller) > Resave без дополнительных опций > заменить старые файлы > попробуйте не изменять URL-адреса и посмотреть, поможет ли это.

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

Это просто работает для IE, поэтому я применяю этот хак и отлично работает на FF, Safari и других.

хорошо, я наконец нашел свое решение.

Если вы используете шаблоны в своем представлении (используя усы.js или другие...), необходимо учитывать, что некоторые классы могут быть загружены дважды, или будут созданы позже. Итак, вы должны применить эту функцию $(".datepicker" ).datepicker(); после создания экземпляра.

Кажется, происходит с некоторыми темами (Купертино/тема.CSS) в моем случае.

и проблема .ui-helper-скрытый доступный класс, который имеет свойство clip, как и предыдущие пользователи.

просто заменить его и все будет хорошо

$(document).ready(function() {
    $("#datePicker").datepicker({ dateFormat: "yy-m-d" });
    $('#ui-datepicker-div').css('clip', 'auto');
});

Если вы используете скрипты metro UI css (отличный бесплатный metro UI set от http://metroui.org.ua/), это тоже может столкнуться. В моем случае это было проблемой в последнее время.

Итак, удалена ссылка скриптов metro UI (поскольку я не использовал его компоненты), datepicker показывает.

но вы не можете получить метро искать datepicker jQuery-ui

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

У меня были похожие проблемы. Он будет запускаться один раз, а не 2-й раз под разными вкладками. Я использовал класс вместо идентификатора и везде использовал одно и то же имя класса. Мне кажется, datepicker активируется один раз, и исходная инициализация должна использоваться везде. Вероятно, можно кодировать вокруг этого с помощью api destroy, но для меня было легко просто использовать один и тот же класс везде.

Я нашел решение трюк. Вы можете использовать приведенные ниже коды.

$(".datepicker").datepicker({
/* any options you want */
beforeShowDay: function (date) {
    $('#ui-datepicker-div').css('clip', 'auto');
    return [true, '', ''];
    }
});

вот полный код, он работает с моей стороны: просто тест.

<!doctype html>
<html lang="en">
   <head>
      <title>jQuery Datepicker</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#datepicker1" ).datepicker();
         });
      </script>
   </head>
   <body>
      <p>Enter Date: <input type="text" id="datepicker1"></p>
   </body>
</html>