angular-strap datepicker disable-dates

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

Does it give you an error ? does it just not work ? Can you create a plunkr or similar for an easier to read example ? — sirrocco
– sirrocco, Commented Apr 27, 2015 at 7:45

Eng Mahmoud Gamal · Accepted Answer · 2015-04-27 13:58:45Z

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;

};

Maxoizs · Accepted Answer · 2015-07-10 10:55:43Z

0

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

answered Jul 10, 2015 at 10:55

Maxoizs

1152 silver badges5 bronze badges

Collectives™ on Stack Overflow

angular-strap datepicker disable-dates

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related