{"id":124,"date":"2015-03-05T22:28:46","date_gmt":"2015-03-05T22:28:46","guid":{"rendered":"https:\/\/www.tech.shinynewthings.com\/?p=124"},"modified":"2015-03-05T22:29:51","modified_gmt":"2015-03-05T22:29:51","slug":"angularjs-ui-bootstrap-datepicker","status":"publish","type":"post","link":"https:\/\/www.tech.shinynewthings.com\/?p=124","title":{"rendered":"AngularJS – UI Bootstrap DatePicker"},"content":{"rendered":"

The AngularUI team made a collection of nice Bootstrap components.<\/p>\n

Unfortunately, the DatePicker appears to have a conflict with other scope variables.<\/p>\n

The recommended javascript to open the DatePicker is shown below.<\/p>\n

$scope.open = function($event) {
\n $event.preventDefault();
\n $event.stopPropagation();
\n $scope.opened = true;
\n};<\/code><\/p>\n

This code will work once and only one.<\/p>\n

If the DatePicker is closed, it cannot be re-opened.<\/p>\n

The problem is caused by a generically named scope property.<\/p>\n

Changing three things will fix the issue.<\/p>\n

Change the javascript to the following.
\n$scope.openDatepicker = function($event) {
\n $event.preventDefault();
\n $event.stopPropagation();
\n if (typeof($scope.datepicker) === 'undefined'){
\n $scope.datepicker = {};
\n }
\n $scope.datepicker.opened = true;
\n };<\/code><\/p>\n

Change the inputs is-open attribute as shown below.
\nis-open=\"datepicker.opened\"<\/code><\/p>\n

Change the buttons ng-click attribute as shown below.<\/p>\n

ng-click=\"openDatepicker($event)\"<\/code><\/p>\n

Angular UI Bootstrap<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-124","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=124"}],"version-history":[{"count":2,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts\/124\/revisions"}],"predecessor-version":[{"id":126,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=\/wp\/v2\/posts\/124\/revisions\/126"}],"wp:attachment":[{"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tech.shinynewthings.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}