Question

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

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 example

另外screenshot

bootstrap timepicker隐藏在ui-grid的网格后面，Angular Js

1 个答案: