我在表格单元格中使用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>
任何机构都可以提出一些关于如何实施它的想法吗?
答案 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;
};