Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ui.bootstrap.datepicker is-open not working in modal

I´m using the Bootstrap UI datepicker directive and I´m trying to have an datepicker button that opens the datepicker popup like in the original example but it does not work in a modal window.

See PLUNKER

What am I doing wrong?

like image 575
Kjartan Valur Þórðarson Avatar asked Nov 26 '13 09:11

Kjartan Valur Þórðarson


3 Answers

Just change to: is-open="opened" to:

is-open="$parent.opened"

Fixed Demo Plunker

So relevant snippets of HTML will look like:

      <div class="input-group">

          <input type="text" class="form-control" 
                 datepicker-popup="dd.MM.yyyy"
                 ng-model="dt"
                 is-open="$parent.opened"
                 ng-required="true"
                 close-text="Close" />
          <span class="input-group-btn">
          <button style="height:34px;" class="btn btn-default" ng-click="open()">
          <i class="icon-calendar"></i></button> <b><- button not working</b>
          </span>
        </div>
like image 61
Maxim Shoustin Avatar answered Oct 21 '22 05:10

Maxim Shoustin


I had to put a timeout to make it work:

function toggleStart($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $timeout(function () {
        vm.isStartOpen = !vm.isStartOpen;
    });
}

My template looks like this:

<input type="text" class="form-control"
        datepicker-popup ng-model="vm.startDate"
        is-open="vm.isStartOpen" />
<span class="input-group-btn">
    <button type="button" class="btn btn-default"
            ng-click="vm.toggleStart($event)">
        <i class="glyphicon glyphicon-calendar"></i>
    </button>
</span>
like image 32
pomber Avatar answered Oct 21 '22 05:10

pomber


datepicker directive creates its own scope which is not accessible outside.So to solve this you can use.

$parent.isopen 

or use some Object property name to avoid prototype Inheritance, like

$scope.config.isopen=true;

ng-model="config.isopen" instead of ng-model="isopen".

like image 8
Aditya kumar Avatar answered Oct 21 '22 06:10

Aditya kumar