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.

$ = function($event) {
$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) {
if (typeof($scope.datepicker) === 'undefined'){
$scope.datepicker = {};
$scope.datepicker.opened = true;

Change the inputs is-open attribute as shown below.

Change the buttons ng-click attribute as shown below.


Angular UI Bootstrap

Leave a Reply

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