可滚动div上的jquery DateTimePicker

Question

我将这个jquery插件用于dateTimePicker：http://xdsoft.net/jqplugins/datetimepicker/

它工作正常，但在可滚动的div / content中显示它有问题。

该位置不再固定在输入上。它固定在HTML周围，滚动后它将保持原样。

第二个问题是日历与红线重叠＆＃34;在底部。在我的情况下，这代表浏览器底部，因此它会削减日历，它不再可用。

如果下面的内容很小，则插件支持显示在输入上方，但在这种情况下不支持。

有人知道如何解决这个问题吗？ 该插件的文档有一些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>