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

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

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

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

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

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

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

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

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

НЕТ

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

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

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

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

Надеюсь, это поможет кому-то оторваться.

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

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

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

У меня была такая же проблема с использованием 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.

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

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

.ui-helper-hidden-accessible { position: absolute !important; клип: прямоугольник (1px 1px 1px 1px); клип: прямоугольник (1px, 1px, 1px, 1px); }

to

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

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

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

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

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

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

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

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

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

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

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

В моем случае это происходит с некоторыми темами (cupertino/theme.css).

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

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

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

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

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

Но вы не можете заставить метро искать средство выбора даты jQuery-ui

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

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

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

$(".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>

Просто пост, потому что первопричина моего случая не была описана ей.

В моем случае проблема заключалась в том, что «assets/js/fuelux/treeview/fuelux.min.js» добавлял конструктор .datepicker(), поэтому он переопределял assets/js/datetime/bootstrap-datepicker.js.

просто перемещая

быть незадолго до того, как $('.date-picker') решил мою проблему.

Была такая же проблема при работе с модальным бутстрапом. Я случайно установил z-index для .ui-datepicker, используя !important, который переопределяет атрибут css z-index средства выбора даты для элемента. Удаление !important сработало.