jquery 可滚动的 DateTimePicker div

Question

我正在为 dateTimePicker 使用这个 jquery 插件：http://xdsoft.net/jqplugins/datetimepicker/

它工作正常，但在可滚动显示时出现问题 div/content。

位置不再固定到输入。它固定在 HTML 周围，滚动后它会留在原处。

第二个问题是日历与底部的 "red line" 重叠。在我的例子中，这代表浏览器底部，因此它会削减日历并且它不再可用。

如果下面的内容太小，插件支持出现在输入上方，但在这种情况下不支持。

有人知道如何解决这个问题吗？该插件的文档有一些 iFrame 支持，但我看不到使用它来解决我的特定问题的方法。

示例页面：http://heymark.de/test/test.html

此致！

Answer 1

<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>

Answer 2

花了一些时间在源代码中挖掘（开发人员不提供完整的回调集总是很遗憾！）。

我使用了 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 />

jquery 可滚动的 DateTimePicker div

jquery DateTimePicker on scrollable div

javascript

jquery

scroll

position

datepicker