jquery - X-editable datepicker 一直在同一个地方弹出 - 如何让它在实际日期字段旁边弹出？

Question

在使用X-editable我遇到了这个问题，如果我指定日期选择器字段模式:“popup”，我会让弹出窗口显示得很好......但现在如果我有一个长表(垂直或水平)，更向下(或向右) ) 我去的表格，情况越糟 - 这个日期/日期时间选择器弹出窗口仅在页面上的特定位置弹出(左上角)。

因此，如果我有 50 条记录，然后单击其中一条底部的记录以打开日期选择器，我什至看不到它弹出并不得不假设它已经弹出，所以我必须滚动所有到表格顶部才能看到它。

如果我在较小屏幕上的表格中向右移动，情况会更糟 - 然后我必须向左滚动以查看打开的弹出窗口(如果我不知道它最终会出现在哪里，我想脚本已损坏且无法运行)。

这是我在定义中使用的内容 - 我是否遗漏了什么？或者 CSS 中的某些东西？

$('.time').editable({
    type: 'datetime',
    url: 'post.php',
    format : 'yyyy-mm-dd hh:ii',
    viewformat : 'yyyy-mm-dd hh:ii',
    inputclass : "datepick",
    emptytext: '...',
    datetimepicker : {
        weekStart : 1
    },
});

Answer 1

是的，这是工具提示/弹出窗口定位的老问题。

请尝试以下技巧:

$('.time').editable({
    type: 'datetime',
    url: 'post.php',
    format : 'yyyy-mm-dd hh:ii',
    viewformat : 'yyyy-mm-dd hh:ii',
    inputclass : "datepick",
    placement: function (context, source) {
      var popupWidth = 336;
      if(($(window).scrollLeft() + popupWidth) > $(source).offset().left){
        return "right";
      } else {
        return "left";
      }
    },
    emptytext: '...',
    datetimepicker : {
      weekStart : 1
    },
});

请查看一个工作示例:http://jsfiddle.net/giftedev/yo0ztmkr/1/