引导时间选择器隐藏在 ui-grid、Angular Js 中的网格后面

Question

我需要在 ui 网格单元格中显示时间选择器。我已经实现了它，但是有一个问题。它适用于上部单元格，但对于底部单元格，timepicker 的某些部分隐藏在网格后面。这里是笨蛋。

http://plnkr.co/edit/YbZbboMz36xTCdikNyhN?p=previewenter 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 example

还有screenshot