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

Ответ 1

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

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

Ответ 2

У меня была одна и та же проблема, и я обнаружил, что в моем случае причиной было то, что аргумент datepicker div по какой-то причине сохраняет класс .ui-helper-hidden-access, который имеет следующий 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-index без каких-либо успехов. Решение, которое сработало для меня, состояло в том, чтобы установить для свойства clip для параметра datepicker значение по умолчанию, auto:

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

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

Ответ 3

У меня была такая же проблема: сборщик дат был добавлен успешно (и его можно было даже найти в FireBug), но не было видно. Если вы используете FireBug для удаления класса "ui-helper-hidden-available" из div выбора даты (идентификатор: "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');  
});

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

EDIT: Исправлена ​​ошибка синтаксиса кода.

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

к

.ui-helper-hidden-available {position: absolute! important; }

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

Ответ 8

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

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

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

НЕ

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

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

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

Это немного другая проблема. Со мной отобразится датаборщик, но css не загружается.

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

Ответ 14

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

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

Ответ 15

Кажется, случается с некоторыми темами (cupertino/theme.css) в моем случае.

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

Просто запишите его, и все будет хорошо

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

Ответ 16

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

Итак, удалили ссылку на скрипты для интерфейса Metro (поскольку я не использовал его компоненты), отображается датапикер.

Но вы не можете найти метро, ​​чтобы посмотреть дату jQuery-ui

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

Ответ 17

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

Ответ 18

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

<!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>

Ответ 19

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

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