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

angular-strap datepicker disable-dates

2 个答案: