Adding Angular Ui Datepicker Dynamically

In my project I need to add dynamic amount of datepickers to the page. I tried to do it this way (Plunker): Script: var app = angular.module('plunker', ['ui.bootstrap']); app

Solution 1:

All of your datepickers have id="datePickerItem".

The id attribute must be unique in html. Try this instead:

id="datePickerItem_{{$index}}"

This will add the ng-repeat's current index to the id, so you can be relatively certain your id's are unique. This should also prevent all the datepickers from opening at the same time.

Also, you're using one and the same opened variable for all datepickers.

Try this instead:

<div ng-repeat="item in details" class="input-group">
    <input ng-model="item.parameterValue"type="text" class="form-control"id="datePickerItem_{{$index}}" datepicker-popup="shortDate" 
        is-open="opened[$index]" datepicker-options="dateOptions" current-text="Today"
        clear-text="Clear" close-text="Close" ng-readonly="false" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="openDatePicker($event, $index)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>

And:

$scope.opened = [];
$scope.openDatePicker = function($event, index) {
    $event.preventDefault();
    $event.stopPropagation();

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

Just make sure you set $scope.opened[index] to false, in case you close the datepicker.

Solution 2:

try this:

$scope.open = function($event,opened) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope[opened] = true;
    };

and in your html

ng-click="open($event, 'nameOfYourModel')"

Solution 3:

why not bind opened on the repeat object?

like:

<div ng-repeat="item in details"class="input-group">
    <input ng-model="item.parameterValue" type="text"class="form-control" 
        id="datePickerItem_{{$index}}" datepicker-popup="shortDate"is-open="item['opened']" datepicker-options="dateOptions" current-text="Today"
        clear-text="Clear" close-text="Close" ng-readonly="false" />
    <span class="input-group-btn">
    <button type="button"class="btn btn-default" ng-click="openDatePicker($event, item)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>

and in controller:

$scope.openDatePicker = function($event, item) {
    $event.preventDefault();
    $event.stopPropagation();

    if(item.opened){
        item.opened = !item.opened;
    } else{
        item.opened = true;
    }
};