jQuery DatePicker не перемещается с содержимым HTML в прокручиваемом div - PullRequest
Новая
       8

jQuery DatePicker не перемещается с содержимым HTML в прокручиваемом div

2 голосов
/ 07 декабря 2009

У меня есть форма с ограниченным размером и стиль переполнения для прокрутки. Эта форма содержит много DatePickers. Если я открою один из DatePicker, прокрутите панель (с помощью колеса прокрутки, которое удерживает фокус на DatePicker, чтобы он оставался открытым), DatePicker не перемещается с полем формы, к которому он прикреплен. Смотрите мой полностью рабочий пример ниже: 

<html>
  <head>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
  </head>
  <body>
    <div style="width: 200px; height: 200px; overflow: scroll">
<script type="text/javascript">
  $(function() {  
    $('#datepicker').datepicker({   
       changeMonth: true, 
       changeYear: true, 
       showOn: 'button', 
       changeMonth: true, 
       changeYear: true, 
       buttonImageOnly: true, 
       dateFormat: 'dd M yy', 
       buttonText: 'Click'   
    });
  });
</script>
      <div class="demo">
        <p>Date: 
          <input type="text" id="datepicker">
        </p>
      </div>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
    </div>
  </body>
</html>

В настоящее время средство выбора даты фиксируется на месте относительно окна браузера, а не поля ввода триггера. Может ли кто-нибудь помочь мне сохранить элемент управления DatePicker открытым и в том же месте относительно его поля ввода триггера при прокрутке формы?

Спасибо

Редактировать: Уточнение названия и объяснения ситуации.

Редактировать: исправлен текст резюме

Ответы [ 2 ]

3 голосов
/ 28 января 2010

Полное решение: 

var dtPckr = $('#datepicker')

$(".demo").scroll(function() {
  dtPckr.datepicker('hide');
});

$(window).resize(function() {
  dtPckr.datepicker('hide');
});

Это расширяет решение, опубликованное Ником С, добавив обработчик изменения размера окна, чтобы скрыть средство выбора даты. Это должно охватывать все случаи, когда содержимое будет перемещаться относительно отображаемого средства выбора даты.

1 голос
/ 14 января 2010

Datepicker присоединен к контейнеру, элементу body во всех случаях, начиная с виджета 1.7.2. К сожалению, это означает, что нет, это не решаемая проблема в прокрутке div. Это появилось в списке рассылки групп jQuery некоторое время назад.

Альтернативой может быть закрытие окна выбора даты при прокрутке элемента div, чтобы, по крайней мере, визуальный артефакт не происходил: 

$(".demo").scroll(function() {
  $('#datepicker').datepicker('hide');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...