可滚动div上的jquery DateTimePicker

Question

我正在为 dateTimePicker 使用这个 jquery 插件：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>