AngularJS – UI Bootstrap DatePicker

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)"

Angular UI Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *