How do I display Angular UI Bootstrap date picker on click?

Question

I have an Angular app that uses Full Calendar. I have a Full Calendar custom button that when a user clicks, should open a Angular Bootstrap Datepicker. I'm currently toggling CSS visibility but for some reason, the date picker doesn't display (after clicking the button) unless I resize the window.

My template:

<div id="cal-go-to-date" ng-style="goToDate.style">
  <div uib-datepicker ng-model="goToDate.dt" class="well well-sm" datepicker-options="goToDate.options"></div>
</div>

My Angular controller:

$scope.uiConfig = {
  calendar: {
    // Other configuration
    header: {
      center: 'title'
    },
    customButtons: {
      goToDate: {
        text: 'go to date',
        click: function(event) {
          $scope.goToDate.style.visibility = 'visible';
        }
      }
    },
    // Other configuration
  }
};

$scope.goToDate = {
    dt: new Date(),
    options: {
      datepickerMode: 'month',
      minMode: 'month'
    },
    style: {
      'position': 'absolute',
      'top': '224px',
      'left': '76px',
      'min-height': '290px',
      'z-index': '99999',
      'visibility': 'hidden'
    }
  };

I am calling $scope.goToDate.style.visibility = 'visible'; but that doesn't work unless I resize the window. What can I do to toggle the visibility of the picker?

That sounds like it's happening outside the scope, since a resize will make it take effect. Can you post the code showing how and when you change the visibility property? — Reinstate Monica Cellio, Dec 13 '17 at 09:13
@Archer I updated the question. See the `click` function inside uiConfig. — JackH, Dec 13 '17 at 10:17
Why not using [`uib-datepicker-popup `](https://angular-ui.github.io/bootstrap/#datepickerPopup)? Or at least try wrapping the call with [`$applyAsync`](https://code.angularjs.org/1.3.8/docs/api/ng/type/$rootScope.Scope#$applyAsync) like, `$scope.$applyAsync(function(){ $scope.goToDate.style.visibility = 'visible'; });`, since it looks like this happens outside of angularjs scope. — Stanislav Kvitash, Dec 13 '17 at 10:27
@StanislavKvitash I am triggering this on clicking a button. uib-datepicker-popup works only on an input field and I don't need one in the UI. I did try using it but it introduced other UI bugs and stuff. — JackH, Dec 13 '17 at 10:29
@StanislavKvitash You had the right answer! Will mark as "answer" if you move it from a comment to answer. Thank you! Also, any suggestion on how I can hide on clicking anywhere outside? — JackH, Dec 13 '17 at 10:58
@Nag added as answer. One way of achieve hiding - is to put a transparent element "under" the datepicker container and listen to the click event on it. Or some other approaches could be found there https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — Stanislav Kvitash, Dec 13 '17 at 11:06

score 1 · Answer 1 · answered Dec 13 '17 at 10:20

1

If its the problem resizing try using this function

$scope.windowResize = function () {
            setTimeout("$(window).trigger('resize')",400);
         };

and then call this function on the click of that button . Hope it might help

answered Dec 13 '17 at 10:20

Kartik Puri

467
3
13

score 1 · Accepted Answer · answered Dec 13 '17 at 11:05

1

Try wrapping the call with $applyAsync like:

$scope.$applyAsync(function(){ $scope.goToDate.style.visibility = 'visible'; });

since it looks like this happens outside of angularjs scope.

answered Dec 13 '17 at 11:05

Stanislav Kvitash

4,614
18
29

How do I display Angular UI Bootstrap date picker on click?

2 Answers2