JQuery DateTimePicker на прокрутке DIV

Question

Я использую этот плагин JQuery для DateTimePicker: http://xdsoft.net/jqplugins/datetimepicker/

Он отлично работает, но есть проблема с отображением его в прокрутке DIV/содержании.

Положение больше не фиксируется на входе. Он привязан к окружению HTML, и он останется там, где он находится после прокрутки.

Вторая проблема заключается в том, что календарь перекрывает «красную линию» внизу. В моем случае это представляет собой нижнюю часть браузера, и поэтому он сократит календарь и больше не будет использоваться.

Плагин поддерживает отображение над входом, если содержание ниже является небольшим, но не в этом случае.

Есть ли у кого-нибудь идеи, как решить эту проблему? Документация плагина содержит некоторую поддержку iFrame, но я не вижу способа использовать это для моей конкретной проблемы.

Пример Страница: http://heymark.de/test/test.html

С уважением!

Answer 1

Прошло некоторое время и копало в источнике (всегда жаль, что разработчики не дают полный набор обратных вызовов!).

Я использовал событие afterOpen.xdsoft (который не документирован и используется внутренне, поэтому, я думаю, вы не можете полагаться на него, чтобы работать в будущих версиях).

Но в данном примере это работает:

$(document).ready(function() { 
 
    $('#datetimepicker1').datetimepicker({ 
 
    onShow: function() { 
 
     $('#content').append(this) 
 
    } 
 
    }) 
 
    $('#datetimepicker2').datetimepicker({ 
 
    onShow: function() { 
 
     $('#content').append(this) 
 
    } 
 
    }) 
 
    $(document).on('afterOpen.xdsoft', function(event) { 
 
    $(event.target).position({ 
 
     my: 'left top', 
 
     at: 'left bottom', 
 
     of: $(event.target).data('input') 
 
    }) 
 
    }); 
 

 

 
    $("#dt1").datepicker({ 
 
    dateFormat: "dd/mm/yy", 
 
    buttomText: "Arrival date", 
 
    buttonImageOnly: true, 
 
    beforeShow:function(textbox, instance){ 
 
     $('#ui-datepicker-div').css({ 
 
     position: 'absolute', 
 
     top:-20, 
 
     left:5     
 
     }); 
 
     $('#content').append($('#ui-datepicker-div')); 
 
     $('#ui-datepicker-div').hide(); 
 
    } }); 
 

 
});

#content { 
 
    background: #fff; 
 
    height: 500px; 
 
    width: 500px; 
 
    position: relative; 
 
    overflow: scroll; 
 
    border: 2px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.min.css" /> 
 
<div id="content"> 
 
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br/> 
 
<br/>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br/><br/> 
 
<input id="datetimepicker1" type="text" value="2014/03/15 05:06"> not working: dateTimePicker<br/> 
 
<input id="dt1" /> working: jqueryUI Datepicker<br/> 
 
<br/>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet <br/><br/> 
 
<input id="datetimepicker2" type="text" value="2014/03/15 05:06"> not working: dateTimePicker<br/> 
 
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br/><br/>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br/><br/>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br/> 
 
</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 /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<br />

Answer 2

<div class="well"> 
    <div id="datetimepicker1" class="input-append date"> 
    <input data-format="dd/MM/yyyy hh:mm:ss" type="text"></input> 
    <span class="add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar"> 
     </i> 
    </span> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(function() { 
    $('#datetimepicker1').datetimepicker({ 
     language: 'pt-BR' 
    }); 
    }); 
</script>