Jquery UI Datepicker не отображается - PullRequest
Новая
       81

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

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 ]

0 голосов
/ 05 марта 2019

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

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

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

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

0 голосов
/ 26 июня 2011

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

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

0 голосов
/ 14 декабря 2016

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

$(".datepicker").datepicker({
/* any options you want */
beforeShowDay: function (date) {
    $('#ui-datepicker-div').css('clip', 'auto');
    return [true, '', ''];
    }
});
0 голосов
/ 16 июня 2016

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

<!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>
0 голосов
/ 11 июня 2015

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

0 голосов
/ 30 ноября 2011 
* html .ui-helper-hidden-accessible 
{
 position: absolute !important; 
 clip: rect(1px 1px 1px 1px); 
 clip: rect(1px,1px,1px,1px); 
}

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

0 голосов
/ 11 декабря 2013

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

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

Но вы не можете найти метро в поиске даты jQuery-ui

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

0 голосов
/ 11 августа 2013

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

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

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

$(document).ready(function() {
    $("#datePicker").datepicker({ dateFormat: "yy-m-d" });
    $('#ui-datepicker-div').css('clip', 'auto');
});
0 голосов
/ 13 марта 2012

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

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

0 голосов
/ 08 апреля 2012

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

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

Страница:
...