CODEWITHSUNDEEP
angularjsdynamicdatepickerangular-ui-bootstrap
Ross Rawlins
Ross Rawlins

Reputation: 667

Dynamic bootstrap ui datepicker

I have a bootstrap ui datepicker sitting inside a ng-repeat. So the user could add as many rows as they like which would result in multiple instances of the datepicker. All the examples I have seen for multiple datepickers only show if you have two and the solutions dont work when applying them to a dynamic situation.

the attribute that opens the date picker is is-open="open" and open is supposed to be unique so I need a way to close all datepickers and only open the one I selected. Baring in mind that each is built out dynamically.

here is the code used in teh repeater.

<div class="input-group">     
                                        <input type="text" class="form-control" name="birthdate" datepicker-popup="{{format}}" ng-model="cabins[$parent.$index].passengers[$index].birth_date" is-open="cabins[$parent.$index].passengers[$index].datePicker" min-date="minDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="open($event,$parent.$index,$index)"><i class="glyphicon glyphicon-calendar"></i></button>
                                        </span>        
                                    </div>

Upvotes: 2

Views: 1650

Answers (2)

Shashank Jain
Shashank Jain

Reputation: 857

The accepted answer did not work for me.

What I observed what that I was getting an error that expression in the is-open attribute is not assignable. That means, internally, the datepicker was trying to set value for the expression in this attribute.

So, to solve it, I removed the equality check and use true and false values:

<div class="input-group w-md">
    <input type="text" class="form-control" ng-click="openCustom($event, $index)" uib-datepicker-popup="{{ 'shortDate' }}" ng-model="employee.probation_end_date" is-open="$parent.opened[$index]" datepicker-options="datepickerOptions" ng-required="false" close-text="Close"/>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openCustom($event, $index)">


 <i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>

And in controller I defined this method:

$scope.opened = [];

$scope.openCustom = function ($event, $index) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened[$index] = true;
};

Upvotes: 2

Rob J
Rob J

Reputation: 6629

Use the ng-repeat $index, is-open"$parent.viewModel.openIndex === $index" and assign the viewModel.openIndex in the open event: ng-click="$parent.viewModel.openIndex = $index". Notice the use of $parent, this is done to access the view model scope inside of a ng-repeat item scope.

Upvotes: 0

Related Questions