The AngularUI team made a collection of nice Bootstrap components.
Unfortunately, the DatePicker appears to have a conflict with other scope variables.
The recommended javascript to open the DatePicker is shown below.
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
This code will work once and only one.
If the DatePicker is closed, it cannot be re-opened.
The problem is caused by a generically named scope property.
Changing three things will fix the issue.
Change the javascript to the following.
$scope.openDatepicker = function($event) {
$event.preventDefault();
$event.stopPropagation();
if (typeof($scope.datepicker) === 'undefined'){
$scope.datepicker = {};
}
$scope.datepicker.opened = true;
};
Change the inputs is-open attribute as shown below.
is-open="datepicker.opened"
Change the buttons ng-click attribute as shown below.
ng-click="openDatepicker($event)"