jqueryののDateTimePicker

Question

私はDateTimePickerのために、このjQueryプラグインを使用しています：http://xdsoft.net/jqplugins/datetimepicker/

それが正常に動作しますが、スクロールのdiv /コンテンツでそれを表示するに問題があります。

位置が入力に固定されていません。それは囲まれたHTMLに固定されており、スクロールした後はその位置に留まります。

第2の問題は、カレンダーが下部の「赤い線」と重なっていることです。私の場合、これはブラウザの底を表しているため、カレンダーをカットしてもはや使用できません。

プラグインは、以下のコンテンツが小さい場合は入力の上に表示されますが、この場合は表示されません。

誰もこの問題を解決する方法を知っていますか？ プラグインのドキュメントにはいくつかのiFrameサポートがありますが、私の特定の問題にこれを使用する方法はありません。

例Page：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>