Praveen Kumar Praveen Kumar - 5 days ago 6
Javascript Question

Dynamic Anagular UI datepickers opening at the same time

I have a page where there are many datepickers in an array. The datepicker ng-repeat is inside a nested ng-repeat. The issue is when in click on one datepicker, all other datepickers open at the same time.

HTML:
//


<div data-ng-repeat="skill in skillset" ng-model="skill.length">
<div class="col-sm-3">
<input type="hidden" ng-model="skill.pk" ng-value="{{skill.pk}}"/>
<ol class="form-control nya-bs-select textbox" name="Skill Set" title="Skill" data-live-search="true" validType="select"
disabled="isProfile" ng-model="skill.skillId" ng-selected="{{skill.skillId}}">
<li nya-bs-option="skillSet in skillSets | orderBy: 'skillSet' track by skillSet.pk" data-value="skillSet.pk">
<a>
{{skillSet.code}}
<span class="glyphicon glyphicon-ok check-mark"></span>
</a>
</li>
</ol>
</div>

<div class="col-sm-2">
<select class="dropdown" ng-model="skill.isPrimary" ng-options="skillset.value as skillset.name for skillset in register.skillsets"></select>
</div>

<div ng-repeat="dt in dates" class="col-sm-2">
<input id="datePickerItem_{{$index}}" type="text" class="datepicker" uib-datepicker-popup="shortDate"
ng-value="skill.sinceLastUsed" ng-model="skill.sinceLastUsed" is-open="dt.opened" ng-click="open($event,dt)"
placeholder="Last Used Date" name="lastuseddate" validType="date" datepicker-options="{minMode: 'month'}" datepicker-mode="'month'"/>
</div>

<div class="col-sm-2">
<span uib-rating ng-model="skill.rating" max="5" min="1" enable-reset="false"></span>
</div>

<div class="col-sm-3">
<button type="button" class="fa fa-minus-circle remove" ng-click="deleteSkill($index)" ng-show="skillset.length>1" data-toggle="tooltip"
data-placement="bottom" title="Delete Skill"></button>
<button type="button" class="fa fa-floppy-o remove" ng-click="saveSkill($index)" data-toggle="tooltip" data-placement="bottom" title="Save Skill"></button>
<button type="button" class="fa fa-plus-circle remove" ng-show="$last" ng-click="addNewSkill($index)"
data-toggle="tooltip" data-placement="bottom" title="Save and Add New Skill"></button><br /><br />
</div>
</div>
</div>




Javascript:
(function (angular) {
var SkillSetController = function ($scope, $controller, $filter, commonAPIservice, candidateCommonServices) {

//Initialization
var _this = this;
_this.title = "Skillset";
_this.service = commonAPIservice;
_this.CandidateCommonServices = candidateCommonServices;
$scope.skillset = [];
$scope.dates = [];


//Button Tooltips
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});

//Function to load Skills Autocomplete
var loadSkillSets = function () {
var url = 'http://localhost:8080/api/skillset';
_this.service.loadRecords(url)
.then(function (response) {
$scope.skillSets = response.data.skillSets;
});
};

//Function to load Candidate Skill Sets
var loadCandidateSkillSets = function () {
var candidateId = _this.CandidateCommonServices.getCandidateId();
if (candidateId > 0) {
var url = 'http://localhost:8080/api/CandidateSkillSet/GetCandidateSkillSet/' + candidateId;
_this.service.loadRecords(url)
.then(function (response) {
var skillSetLength = response.data.length;
if (skillSetLength > 0) {
$scope.skillset = response.data;
$scope.dates = [{}];
angular.forEach($scope.skillset, function (value, key) {
var sinceLastUsed = new Date($scope.skillset[key].sinceLastUsed);
$scope.skillset[key].sinceLastUsed = ((sinceLastUsed.getMonth() + 1) + "/" + sinceLastUsed.getDate() + "/" + sinceLastUsed.getFullYear());

});
}
else {
$scope.skillset = [$scope.candidateSkillSetForm];
$scope.dates = [{}];
}
});
}
};

//Function to save and add new Skill
$scope.addNewSkill = function (recordIndex) {
var skillset = $scope.skillset[recordIndex];
if (skillset.pk >= 0 )
$scope.skillset.push({});
else {
if (!skillset.skillId || !skillset.rating || !skillset.sinceLastUsed || typeof skillset.isPrimary == 'undefined') {
perfUtils.getInstance().successMsg('All Fields are mandatory');
return;
}
var candidateId = _this.CandidateCommonServices.getCandidateId();
if (candidateId > 0) {
var skillset = $scope.skillset[recordIndex];
skillset.candidateId = candidateId;
_this.service.add('http://localhost:8080/api/CandidateSkillSet/AddCandidateSkillSet/', skillset)
.then(function (response) {
perfUtils.getInstance().successMsg(_this.title + ' added Successfully!');
});
}
$scope.skillset.push({});
}
};

//Function to Save skill
$scope.saveSkill = function (recordIndex) {
var skillset = $scope.skillset[recordIndex];
if (!skillset.skillId || !skillset.rating || !skillset.sinceLastUsed || typeof skillset.isPrimary == 'undefined') {
perfUtils.getInstance().successMsg('All Fields are mandatory');
return;
}
var candidateId = _this.CandidateCommonServices.getCandidateId();
if (candidateId > 0) {
if (skillset.pk > 0) {
alert("Updated Successfully");
}
else
{
skillset.candidateId = candidateId;
_this.service.add('http://localhost:8080/api/CandidateSkillSet/AddCandidateSkillSet/', skillset)
.then(function (response) {
loadCandidateSkillSets();
perfUtils.getInstance().successMsg(_this.title + ' added Successfully!');
});
}
}
};

//Function to Delete Skill
$scope.deleteSkill = function (recordIndex) {
var candidateId = _this.CandidateCommonServices.getCandidateId();
var skillset = $scope.skillset[recordIndex];
if (candidateId > 0 && typeof skillset.isPrimary != 'undefined') {
_this.service.updateDel('http://localhost:8080/api/CandidateSkillSet/DeleteCandidateSkillSet/',skillset)
.then(function (response) {
$scope.skillset.splice(recordIndex, 1);
perfUtils.getInstance().successMsg(_this.title + ' deleted Successfully!');
});
}
else
$scope.skillset.splice(recordIndex, 1);
};

**//Function to open Datepicker
$scope.open = function ($event, dt) {
$event.preventDefault();
$event.stopPropagation();
dt.opened = true;
};**



//Load Skill Type Dropdown
$scope.register = {};
$scope.register.skillsets = [{
value: true,
name: "Primary"
}, {
value: false,
name: "Secondary"
}];

//Star Rating Directive
$scope.ratingStates = { stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' };

//Functions during page load
loadCandidateSkillSets();
loadSkillSets();
};
SkillSetController.$inject = ['$scope', '$controller','$filter', 'commonAPIservice', 'candidateCommonServices'];
mainApp.controller('skillSetController', SkillSetController);


})(angular);

Answer

I think datepicker id's are same that's why they all are opening try to change id's something like

id="datePickerItem_{{$parent.$index}}_{{$index}}"
Comments