CODEWITHSUNDEEP
angularjsdatepickerangular-ui-bootstrap
user3861284
user3861284

Reputation: 249

uib-datepicker-popup won't reopen

I am trying to use uib-datepicker-popup but am running into an issue that once the calendar opens and I choose a date, I cannot reopen the calendar without refreshing the screen. I step through the function call on the ng-click and it sets the is-open flag to true but the popup doesn't show after the first time.

This is the HTML:

<span class="input-group" >
    <input type="text" class="input-sm "  uib-datepicker-popup="{{format}}"
           ng-model="requestDate" is-open="opened1"
           datepicker-options="dateOptions"  close-text="Close"  />
    <span class=" input-sm" >
        <button type="button" class="btn btn-default"  ng-click="open1()">
          <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</span>

And the controller:

$scope.format = 'yyyy-MM-dd';
$scope.dateOptions = {
    'year-format': "'yy'",
    'starting-day': 1
};

$scope.open1 = function() {
    $scope.opened1 = true;
};

I don't understand why it won't open...any thoughts?

Upvotes: 0

Views: 558

Answers (1)

user3861284
user3861284

Reputation: 249

thank you all for your help. I did a lot more searching after I posted the question and came across something that fixed the issue...not sure why it made it work but it does.

I changed the open1 function to the following...I got it to work first for one and then extended to so I can use it for all...

    $rootScope.openCalendar = function($event,whch) {
        $event.preventDefault();     <- I had tried this before
        $event.stopPropagation();    <- I had tried this before
        $rootScope.datepicker = {[whch]: true}; 

};

In my HTML I changed both lines: (look for the <--)

<input type="text" class="input-sm "  uib-datepicker-popup="{{format}}"
       ng-model="requestDate" is-open="datepicker.opened1"    <--
       datepicker-options="dateOptions"  close-text="Close"  />
<span class=" input-sm" >
    <button type="button" class="btn btn-default"  ng-click="openCalendar($even, 'opened1')">   <--
      <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>

This works really well from what I can see so far. I guess I could shorten it a bit by using Lex's suggestion too....

Thanks again!

Upvotes: 0

Related Questions