angular-strap datepicker disable-dates - angularjs

Question

Using angular-strap v2.2.1, I have a scenario where I have list of periods every period use min-date and max-date attribute and when set a period in the change of end date ,I should disable this period here is the html :
<div class="row">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th colspan="4" style="border: none"></th>
<th colspan="10" class="text-center">Series Closed</th>
</tr>
<tr>
<th>Period</th>
<th>Period Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Financial</th>
<th>Sales</th>
<th>Purchasing</th>
<th>Inventory</th>
<th>Payroll</th>
<th>Manufacturing</th>
<th>Expense Management</th>
<th>POS</th>
<th>Bank</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="period in AllPeriods">
<td>1</td>
<td class="col-md-3">
<input type="text" id="PeriodName{{$index}}" class="form-control input-sm"
placeholder="Period Name" ng-model="period.PeriodName">
</td>
<td class="col-md-2">
<div class="input-group">
<input type="text" id="StartDate{{$index}}" class="form-control" ng-model="period.StartDate"
data-date-format="dd/MM/yyyy" data-max-date="{{period.EndDate}}"
data-disabled-dates="{{unavailableDates}}"
autoclose="true"
placeholder="Start Date" bs-datepicker>
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</td>
<td class="col-md-2">
<div class="input-group">
<input type="text" id="EndDate{{$index}}" class="form-control" ng-model="period.EndDate"
data-date-format="dd/MM/yyyy" data-min-date="{{period.StartDate}}"
data-disabled-dates="{{unavailableDates}}"
autoclose="true"
placeholder="End Date" ng-change="DisableDate(period.StartDate,period.EndDate)" bs-datepicker>
<span class="input-group-addon">
<i class="fa fa-calendar"></i>
</span>
</div>
</td>
<td class="text-center">
<input type="checkbox" class="form-control" name="IsClosed{{$index}}" ng-model="period.IsClosed" style="position:static;opacity:10;">
</td>
<td class="text-center">
<input type="checkbox" class="form-control" name="IsSalesClosed{{$index}}" ng-model="period.IsSalesClosed" style="position:static;opacity:10;">
</td>
<td class="text-center">
<input type="checkbox" class="form-control" name="IsPurchaseClosed{{$index}}" ng-model="period.IsPurchaseClosed" style="position:static;opacity:10;">
</td>
<td class="text-center">
<input type="checkbox" class="form-control" name="IsInventoryClosed{{$index}}" ng-model="period.IsInventoryClosed" style="position:static;opacity:10;">
</td>
<td class="text-center">
<input type="checkbox" class="form-control" name="PayrollClosed{{$index}}" ng-model="period.PayrollClosed" style="position:static;opacity:10;">
</td>
<td class="text-center">
<input type="checkbox" class="form-control" name="IsManufacturingClosed{{$index}}" ng-model="period.IsManufacturingClosed" style="position:static;opacity:10;">
</td>
<td class="text-center">
<input type="checkbox" class="form-control" name="IsExpenseManagementClosed{{$index}}" ng-model="period.IsExpenseManagementClosed" style="position:static;opacity:10;">
</td>
<td class="text-center">
<input type="checkbox" class="form-control" name="IsPOSClosed{{$index}}" ng-model="period.IsPOSClosed" style="position:static;opacity:10;">
</td>
<td class="text-center">
<input type="checkbox" class="form-control" name="IsBankClosed{{$index}}" ng-model="period.IsBankClosed" style="position:static;opacity:10;">
</td>
</tr>
</table>
</div>
</div>
in the JS :
$scope.AllPeriods = [];
$scope.NumberOfPeriodsChanged = function () {
$scope.AllPeriods = [];
var num = $("#Num").val();
for (var i = 0; i < num; i++) {
var temp = {
YearCode: '',
PeriodName: '',
StartDate: '',
EndDate: '',
IsClosed: '',
IsSalesClosed: '',
IsPurchaseClosed: '',
IsInventoryClosed: '',
PayrollClosed: '',
};
$scope.AllPeriods.push(temp);
}
};
$scope.unavailableDates = [];
$scope.DisableDate = function (start, end) {
$scope.unavailableDates.push({
start: new Date(start),
end: new Date(end)
});
};

Answer 1

i solved this problem by making two functions to return date_to and date_from :
$scope.ToCustomDate = function (index) {
if (index == 0) {
return;
}
var dt = new Date($scope.AllPeriods[index].StartDate);
dt.setDate(dt.getDate() + 1);
return dt;
};
$scope.FromCustomDate = function (index) {
if (index == 0) {
return;
}
var dt = new Date($scope.AllPeriods[index - 1].EndDate);
dt.setDate(dt.getDate() + 1);
return dt;
};

Answer 2

I have tried your example and it seems that it doesn't work dynamically, You can put the disabled dates in advance and add the next period when the user finish editing the first one, or you might forward your question as issue in angular-strap
btw you don't need brackets to set the disabled dates
data-disabled-dates="unavailableDates"
and you need to refactor your function to take index as it keep adding dates to the array
$scope.DisableDate = function( index, start, end ) {
if ( angular.isDate( start ) && angular.isDate( end ) ) {
$scope.unavailableDates[index] = {
start: new Date( start ).toISOString(),
end: new Date( end ).toISOString()
};
}
};