角带日期选择器禁用日期答案

【问题标题】：angular-strap datepicker disable-dates角带日期选择器禁用日期
【发布时间】：2015-04-27 07:39:33
【问题描述】：

使用 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)
    });
};

【问题讨论】：

它会给你一个错误吗？它只是不起作用吗？您可以创建一个 plunkr 或类似的更易于阅读的示例吗？
这是一个工作示例@sirrocco link

标签： angularjs datepicker angular-strap

【解决方案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;

};

【讨论】：

【解决方案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()
    };
  }
};

【讨论】：