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

Question

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?

Maxim Shoustin · Accepted Answer · 2017-12-01T17:01:08.870

98

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>

edited Dec 01 '17 at 17:01

answered Nov 26 '13 at 10:07

Maxim Shoustin

77,483
27
203
225

7

I was scratching my head over this.. Thank you for posting this solution! And how would anyone know to do this!? – Soichi Hayashi Feb 01 '14 at 02:15
@SoichiHayashi The $parent.xxxx will will prevent the child scope from creating its own property. I think this is is what datepicker does. – Maxim Shoustin Feb 01 '14 at 07:03
2

Or something about modals transcluding the scope, yada yada. Not entirely obvious ;-) – opyate Feb 27 '14 at 17:09
5

Can i tell you that this doesn't make sense to me at all when I have especially made a separate controller for my modal. Thanks for I have spent 4 hours on this. But, better late than never. You're a Rockstar – AdityaSaxena Mar 31 '14 at 12:15
I know I'm a long time after this was written, but is there something that needs to be corrected to make the datepicker's selection actually get returned properly to the main page? (if you try the Plunker, it lets you select a new date and that updates within the modal, but when you click Okay, the main page only ever shows the original date) – Neil Oct 29 '14 at 14:29
**Answered my own question...** - simply need to change the reference to `ng-model="dt"` to be `ng-model="$parent.dt"` within the `input` – Neil Oct 29 '14 at 14:59
@MaximShoustin I actually created an issue on Github about this https://github.com/angular-ui/bootstrap/issues/3034 hope they improve the documentation. – SamMorrowDrums Dec 03 '14 at 09:26
# Maxim Shoustin :I was finding solution.Thanks for posting wonderful solution. – Ravindra Miyani Mar 25 '15 at 10:57
This is the best solution for ui bootstrap datepicker . – Amit singh Jul 30 '15 at 06:26
Not working for me.http://stackoverflow.com/questions/40162169/angular-bootstrap-datepicker-not-opening-on-angular-modal – Saumyaraj Oct 21 '16 at 14:23

pomber · Answer 2 · 2015-08-12T14:37:48.690

13

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>

edited Aug 12 '15 at 14:37

answered Aug 09 '15 at 03:48

pomber

23,132
10
81
94

Wrapping the status change in a $timeout fixed this for me, though I'm nto sure why. Something must be slightly screwy in the library code. – Dan Cohen Nov 06 '15 at 14:52

score 8 · Answer 3 · edited Aug 13 '15 at 09:47

8

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".

edited Aug 13 '15 at 09:47

benka

4,732
35
47
58

answered Aug 13 '15 at 09:18

Aditya kumar

167
2
8

This is far better than the acceted answer. – Mawg says reinstate Monica Mar 26 '16 at 11:16
this is the most elegant solution – ps0604 May 06 '16 at 19:06

score 0 · Answer 4 · edited Jul 01 '14 at 02:45

You also work like that to initialize the date picker by icon.

HTML

<p class="input-group" ng-disabled="invoiceDateDisable">
    <input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

JavaScript

$scope.open = function () {
    $scope.opened = true;
};

score 0 · Answer 5 · answered Apr 06 '17 at 21:48

You don't really need an open function:

    <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="$parent.opened=!$parent.opened">
        <i class="icon-calendar"></i></button> <b><- button not working</b>
        </span>
      </div>

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

5 Answers5

Linked