ng-repeat中的AngularJS DatePicker

发布时间：2020-12-17 17:45:55 所属栏目：安全来源：网络整理

导读：我试图让datepickers使用ng-repeat显示在表格中.我有一个开始日期和结束日期.当我尝试显示两个日期选择器时,它们显示一个在另一个上.下面是我的代码和正在发生的事情的屏幕截图. table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class=

我试图让datepickers使用ng-repeat显示在表格中.我有一个开始日期和结束日期.当我尝试显示两个日期选择器时,它们显示一个在另一个上.下面是我的代码和正在发生的事情的屏幕截图.

<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table table-bordered">
    <tbody>
        <tr ng-repeat="waiver in model.waivers" >
               <td class="input-group">
                <input class="form-control" type="text" datepicker-popup="MM/dd/yyyy" ng-model="waiver.StartDate" is-open="waiver.isOpen" close-text="Close" />
                <span class="input-group-btn">
                    <button class="btn btn-default" ng-click="open($event,waiver)"><i class="fa fa-calendar"></i></button>
                </span>
            </td>
            <td class="input-group">
                <input class="form-control" type="text" datepicker-popup="MM/dd/yyyy" ng-model="waiver.EndDate" is-open="waiver.isOpen" close-text="Close" />
                <span class="input-group-btn">
                    <button class="btn btn-default" ng-click="open($event,waiver)"><i class="fa fa-calendar"></i></button>
                </span>
            </td>
            <td><input type="text" ng-model="waiver.FuelCap" /></td>
            <td><button type="button" ng-click="updateWaiver(waiver)" class="btn btn-warning"><i class="fa fa-refresh"></i></button></td>
            <td><button type="button" ng-click="removeWaiver(waiver)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></td>
        </tr>
    </tbody>
</table>

截图

这是一个快速的plunkr示例.

我知道当点击打开按钮时它们都打开,但是如果你能帮助解释它们出现在表格的同一列中的原因.

解决方法

它与bootstrap如何为输入组设置样式有关.你不需要把这个类放在td上.尝试将其向下移动到这样的水平：

<td>
        <div class="input-group">
          <input class="form-control" type="text" datepicker-popup="MM/dd/yyyy" ng-model="waiver.StartDate" is-open="waiver.isOpen" close-text="Close" />
          <span class="input-group-btn">
            <button class="btn btn-default" ng-click="open($event,waiver)">open</button>
          </span>
        </div>
      </td>
      <td>
        <div class="input-group">
          <input class="form-control" type="text" datepicker-popup="MM/dd/yyyy" ng-model="waiver.EndDate" is-open="waiver.isOpen" close-text="Close" />
          <span class="input-group-btn">
            <button class="btn btn-default" ng-click="open($event,waiver)">open</button>
          </span>
        </div>
      </td>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!