Multiple angular ui bootstrap datepickers with buttons

Question

I have two datepickers that now work but I still can't get the button to work.

I implemented the solution from here but it gets rid of the button. I'd like to keep the calendar button.

How can I keep the calendar button working?

edit: to clarify, it works only for the first click

<div class="input-group">
  <input type="text"
   datepicker-popup="MM/dd/yyyy"
   ng-model="report_args.start_date"
   is-open="opened1"
   ng-click = "report_args.start_date.open = true"
   max-date="maxDate"
   datepicker-options="dateOptions"
   date-disabled="disabled(date, mode)"
   ng-required="true"
   close-text="Close"
   class="form-control">
  <span class="input-group-addon" ng-click="open($event,'opened1')">
    <i class="fa fa-calendar"></i>
  </span>
</div>

JS

$scope.open = function($event, opened) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope[opened] = true;
};

You most likely need to use the dot notation – JoseM Oct 24 '14 at 19:04 — JoseM, Oct 24 '14 at 19:04

score 4 · Accepted Answer · answered Oct 24 '14 at 19:13

What's happening is that the directive is making it's own copy of $scope.opened1 in it's child scope. When it first opens up, it works because it reads the value from the parent scope, but then when it is closed, the opened1 value is updated in the child scope and now you can't modify from outside the child.

What you need to do is use the "dot" notation.

JS

$scope.dpOpened = {
  opened1: false,
  opened2: false
};

$scope.open = function($event, opened) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.dpOpened[opened] = true;
};

HTML

<div class="input-group">
  <input type="text"
   datepicker-popup="MM/dd/yyyy"
   ng-model="report_args.start_date"
   is-open="dpOpened.opened1"
   ng-click = "report_args.start_date.open = true"
   max-date="maxDate"
   datepicker-options="dateOptions"
   date-disabled="disabled(date, mode)"
   ng-required="true"
   close-text="Close"
   class="form-control">
  <span class="input-group-addon" ng-click="open($event,'opened1')">
    <i class="fa fa-calendar"></i>
  </span>
</div>

Read this wiki entry on Understanding Scope in AngularJs

Your property 'status2' on the object $scope.dpOpened is misleading and not needed, please remove for future reference as it works perfectly fine without it. Cheers! — TommyMac, Jan 24 '15 at 04:13

Multiple angular ui bootstrap datepickers with buttons

1 Answers1