angular-strap日期选择器禁用日期

Question

使用angular-strap v2.2.1，我有一个场景，其中我使用min-date和max-date属性列出每个周期，并且当在更改结束日期时设置一个周期时，我应该在以下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>

在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

我通过创建两个返回date_to和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

我试过你的例子，它似乎不能动态地工作，你可以提前将禁用日期放在前面，然后在用户编辑完第一个日期后添加下一个句号，或者你可以在angular-strap中将你的问题作为问题转发

顺便说一句，您不需要括号来设置禁用日期

data-disabled-dates="unavailableDates"

您需要重构您的函数以获取索引，因为它不断向数组中添加日期

  $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()
    };
  }
};