Bootstrap TimePicker隐藏在UI Grid Angular JS中的网格后面

Question

我需要在UI网格单元格中显示timepicker。我已经实施了它，但是有一个问题。它适用于上部细胞，但对于底部细胞，有时的一部分隐藏在网格后面。这是plunker。

http://plnkr.co/edit/ybzbbomz36xtcdiknyhn？p = preview enter code here

在第二行第二行中双击Cell3。可编辑的单元模板将打开。现在单击计时器图标。时间选择器将开放。但它是较低的部分隐藏在网格后面。

Answer 1

我看到，问题是您的构造：

 $(function () {
            $('#timepicker').datetimepicker({
                //format: 'LT'
                format: 'HH:mm'
            });
 });

您有相同的id #TimePicker，每行

解决方案

创建一个指令，也需要position来存储位置配置，如果我们有$last元素，我们应该将垂直位置切换到顶部：

app.directive('timeControl', [function(){
  return {
     restriction: 'A',
     link: function(scope, elem, attr) {
    var position = {
        horizontal: 'right',
        vertical: 'bottom'
    }
     if(scope.$last === true) {
        position = {
        horizontal: 'right',
        vertical: 'top'
    }
     }
     elem.datetimepicker({
                //format: 'LT'
                widgetPositioning: position,
                widgetParent: elem,
                format: 'HH:mm'
            });

          elem.datetimepicker({
                //format: 'LT'
                format: 'HH:mm'
            });
  }
}

}](;

html

 <form name="inputForm">
<div class='input-group date' time-control style="position:absolute; width: 80px;">
                <input type='text' class="form-control" ng-class="col.colIndex()"  ng-model="MODEL_COL_FIELD" style="height:28px"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-time timer"></span>
                </span>
 </div>

您只需将time-control属性添加到Div <div class='input-group date">

plnkr示例

还屏幕截图