bootstrap-datepicker не прокручивается при прокрутке модального

Question

Я использую bootstrap-datepicker и хотел бы показать сборщик данных по модальности бутстрапа 2. Проблема, которую я получил, это выбор даты не прокручивается соответственно при прокрутке модального , он по-прежнему остается.

Код:

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Modal</button> 
<div id="myModal" class="modal hide fade" style="height: 400px; overflow: scroll"> 
    <div style="height:300px"></div> 
    <div>Choose Date: 
     <input class="calendar" /> 
    </div> 
    <div style="height:300px"></div> 
</div> 

и JavaScript:

var datePicker = $(".calendar").datepicker({}); 

jsfiddler: http://jsfiddle.net/csrA5/

Есть ли решение, чтобы сделать его прокрутки при прокрутке модальным?

Answer 1

Существует опция datepicker('place') для обновления позиции. Я обновил jsfiddle

var datePicker = $(".calendar").datepicker({}); 
var t ; 
$(document).on(
    'DOMMouseScroll mousewheel scroll', 
    '#myModal', 
    function(){  
     window.clearTimeout(t); 
     t = window.setTimeout(function(){    
      $('.calendar').datepicker('place') 
     }, 100);   
    } 
); 

Answer 2

Вот еще один способ с помощью JQuery

var checkout = $(".calendar").datepicker({}); 
$("#myModal").scroll(function() { 
    $('.calendar').datepicker('place') 
}); 

Answer 3

Try добавить свиток событий в бутстраповских-datepicker.js, в функции "Datepicker.prototype"

[$(window), { 
       resize: $.proxy(this.place, this), 
       scroll: $.proxy(this.place, this) 
      }] 

Answer 4

Я не знаю почему, но позиционирование основано на прокрутке, поэтому вам нужно найти этот код в bootstrap-datepicker.js

scrollTop = $(this.o.container).scrollTop(); 

и переписать его

scrollTop = 0; 

Это помогло мне, я надеюсь, что это поможет другим народом.

Answer 5

Решение, предоставляемое работниками rab, но все еще не идеально подходит, когда дампикер мерцает при прокрутке бутстрапа. Поэтому я использовал событие прокрутки jquery, чтобы добиться плавного изменения позиции datepicker. Вот мой код:

$(document).scroll(function(){ 
     $('#modal .datepicker').datepicker('place'); //#modal is the id of the modal 
    }); 

Answer 6

я тоже сталкивался с таким же вопросом, используя загрузочный DatePicker в моем проекте. Я использовал альтернативный метод, в котором я создал скрытый прозрачный слой внутри шаблона datepicker внутри bootstrap-datepicker.js (с именем класса 'hidden-layer-datepicker') и дал фиксированное положение и занимал всю высоту и ширину HTML.

DPGlobal.template = '<div class="datepicker">'+ '<span class="hidden-layer-datepicker"></span><div class="datepicker-days"> 

Теперь, когда DatePicker модальное всплывает вновь созданный слой будет занимать всю ширину страницы и высоту и, когда пользователь прокручивает, так как модальный добавляется к телу, то DatePicker модальный слишком свитки с ним. С введением нового слоя внутренняя прокрутка контейнера, в котором присутствует поле ввода даты, будет отменена, пока модальная функция будет открыта.

Еще одна вещь, которую нужно сделать, это обновить событие закрытия модального события даты при нажатии на скрытый слой и сделать это с помощью кода ниже bootstrap-datepicker.js.

// Clicked outside the datepicker, hide it 
        if (!(
         this.element.is(e.target) || 
         (this.picker.find(e.target).length && e.target.className != "hidden-layer-datepicker") || 
         this.picker.is(e.target) || 
         this.picker.find(e.target).length 
        )){ 
         this.hide(); 
        }