表格单元格中的BootStrap日期选择器,显示列中的所有日期选择器

时间:2014-07-18 11:07:34

标签: angularjs angular-ui-bootstrap

我在表格单元格中使用bootstrap日期选择器时遇到问题,日期选择器在每行的同一列的所有单元格中打开,我想在时间上只打开一个单元格的日期选择器。

这是我为演示创建的plunker:http://plnkr.co/edit/xvoz9KIpACsWbAEKqZR1?p=preview 这是表格的示例代码。

<table border="1" id="tAtbl1" >
            <tr>

                <td>Start Date</td>
                <td>End Date</td>

            </tr>
            <tr data-ng-repeat="assignedData in assignedDetails">
                <td>
                <input type="text" class="form-control dateFields"
                        datepicker-popup="MM/dd/yyyy" data-ng-   model="assignedData.startDate"  
                        is-open="startDateOpened" min-date="minDate" 
                        max-date="'2015-06-22'" datepicker-options="dateOptions"
                        date-disabled="disabled(date, mode)" ng-required="true"
                        close-text="Close" ng-click="startDatePopupOpen($event)"  size="11"  />
                </td>
                <td>
                <input type="text" class="form-control dateFields"
                        datepicker-popup="MM/dd/yyyy" data-ng-model="assignedData.endDate"   
                        is-open="endDateOpened" min-date="minDate"
                        max-date="'2015-06-22'" datepicker-options="dateOptions"
                        date-disabled="disabled(date, mode)" ng-required="true"
                        close-text="Close" ng-click="endDatePopupOpen($event)" size="11" /></td>

            </tr>
        </table>

任何机构都可以提出一些关于如何实施它的想法吗?

1 个答案:

答案 0 :(得分:2)

我有同样的问题,这个帖子有帮助。 https://github.com/angular-ui/bootstrap/issues/2384

这是线程中的plnkr。 http://plnkr.co/edit/wiMKB3EiXIaDuv84CLHH?p=preview

<body ng-controller="MainCtrl">
    <form class="form-horizontal container">
      <div ng-repeat="example in examples" class="form-group col-md-12">
        <label>{{$index}}</label>
        <div class="input-group">
          <input class="form-control" type="text" datepicker-popup="dd/MM/yyyy" ng-model="example.date" is-open="example.isOpen" />
          <span class="input-group-btn">
            <button class="btn btn-default" ng-click="open($event, example)">open</button>
          </span>
        </div>
      </div>
    </form>
  </body>


  $scope.open = function($event, example) {
    $event.preventDefault();
    $event.stopPropagation();

    example.isOpen = true;
  };