Datepicker not opening twice in angular-ui version 0.11.0

Question

I am trying to have 2 datepickers and I am using Angular UI version 0.11.0.

My HTML code

<span ng-if="periods.period == 10">
     <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="opened1"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />
     <button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>

</span>


<span ng-if="periods.period == 10"> 
- 
    <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customEndDate" is-open="opened2"  min-date="cdate.customStartDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"  ng-required="true" close-text="Close" class="input-md" />
    <button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button>   
</span>

and my JS code is `

                     $scope.disabled = function(date, mode) {
                      return ( mode === 'day' && ( date.getDay() === -1 || date.getDay() === 7 ) );
                     };

                     $scope.maxDate = new Date();


                       $scope.open = function($event,opened) {
                            $event.preventDefault();
                            $event.stopPropagation();

                            $scope[opened] = true;
                          };


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

` At first, when I click on the button, datepicker opens up just fine. But once it has been opened once,the problem is that the datepicker popup doesn't open the next time I click on the button.

I followed the method given here : http://stackoverflow.com/questions/19613510/how-to-have-at-least-two-datepickers-of-ui-bootstrap-on-a-single-page — Aniket Sinha, May 05 '14 at 13:46
any output in the javascript console when you click the second time? — transient_loop, May 05 '14 at 13:51
to me it seems you are not showing the whole code, how do you actually open the datepicker itself? — transient_loop, May 05 '14 at 14:18

score 55 · Answer 1 · edited Aug 25 '15 at 23:31

55

I was having the same issue whereby I could only open the date picker control once using the button, but it would not open a second time. The problem may be related to a scope issue which might be coming about because the button is not a child of the input HTML element. I was able to get the button to work by changing the data model a little bit. For example, instead of using $scope.isDatePickerOpen as the model, I changed to $scope.datePicker.isOpen (and set is-open="datePicker.isOpen"). Note that the new data model for is-open does not hang directly off of $scope, but was moved one level deep (off the $scope.datePicker object). This seems to make the data more "findable".

The other thing I had to do was change the data model on a timer. For example:

$scope.openDatePicker = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $timeout( function(){
     $scope.datePicker.isOpen = true;  
  }, 50);
};

At any rate, your workaround posted above was what gave me the motivation to keep looking for a solution, so thanks!

edited Aug 25 '15 at 23:31

FlavorScape

13,301
12
75
117

answered Jun 10 '14 at 17:24

Exemel

551
3
5

Great, can you give a Plunk for your solution. – Aniket Sinha Jun 23 '14 at 08:52
@AniketSinha http://plnkr.co/edit/NuoBQe?p=info. This happened to me in the modal window as described here http://stackoverflow.com/questions/18716113/scope-issue-in-angularjs-using-angularui-bootstrap-modal – Artiom Jul 05 '14 at 17:45
2

It has to do with the data being a Primitive. They suggest to avoid primitives if possible (data that isnt part of an object). http://www.codelord.net/2014/05/10/understanding-angulars-magic-dont-bind-to-primitives/ – geilt Jul 12 '14 at 08:51
Worked for me. It is probably not the best solution, but it works for now. Also, remember to inject the $timeout service in the controller. – tomazahlin Jul 23 '14 at 15:39
This worked for me. I tried the other suggestions, using $parent.isOpen, and it just didn't work for me (even though I saw plunks showing that adding $parent does in fact work). Frustrating. – Mark B Aug 23 '14 at 00:29
It doesn't work so well for me. When I try to change the month it simply closes the datepicker. – Davide Pastore Dec 15 '14 at 11:54
Like you said, I created '$scope.opened = { yesOpen: false };' in my controller and this worked when using 'opened.yesOpen' Thanks! – Post Impatica Feb 06 '15 at 15:16
Thanks a lot! Been working with this for hours, managed to get it to work without the extra timeout function. – Martin Feb 18 '15 at 09:47
I did the same workaround by changing `is_open` model one level deeper. And there's issue with `ng-model` binding as well, that if `ng-model="date"`, the model is not actually updated when date is picked, the workaround is also add one level to the model, eg. `ng-model="data.date"`. – Roy Ling Apr 03 '15 at 06:49
They addressed [this kind of problems on their FAQ](https://github.com/angular-ui/bootstrap/wiki/FAQ#my-input-elements-stop-working-when-i-place-a-tooltip--popover-on-it). They only talk about the `ngModel` case, but it applies to several other cases, this being one. I confess I didn't thought about it either, 'till I saw this. Thanks! – flapas May 25 '15 at 16:08
Only had to add $timeout to get mine to work, thanks :) – user3718908x100 Aug 31 '15 at 16:49

score 41 · Accepted Answer · edited Jul 21 '14 at 03:00

41

Quick Fix: Removed the button tag altogether and modified the datepicker code, so it looks like this :

<input type="text" 
       datepicker-popup="dd-MMMM-yyyy"
       ng-model="cdate.customStartDate"
       is-open="cdate.customStartDate.open"
       ng-click = "cdate.customStartDate.open = true"
       max-date="maxDate"
       datepicker-options="dateOptions"
       date-disabled="disabled(date, mode)" 
       ng-required="true"
       close-text="Close"
       class="input-md" />

edited Jul 21 '14 at 03:00

Mike Chamberlain

39,692
27
110
158

answered May 06 '14 at 05:17

Aniket Sinha

6,001
6
37
50

Wonderful, this makes this directive so simple. I wonder why people need buttons to handle the date picker :P – Aditya Sethi Oct 01 '14 at 12:44
3

It is important to highlight that moving the open flag "one level deeper", as answered by Exermel was what actually solved the issue. – Martin Feb 18 '15 at 09:48

score 31 · Answer 3 · edited May 23 '17 at 12:01

31

Found answer on other StackOverflow question, just use is-open="$parent.isOpen"

https://stackoverflow.com/a/20213924/1596661

edited May 23 '17 at 12:01

Community

1
1

answered Jul 11 '14 at 14:38

KCWebMonkey

411
4
4

1

Spent many many hours trying to figure out why it works once and then isOpen is permanently false. And only if you put the thing in an ngIf. Thank you for this. – HMR Aug 06 '14 at 14:15
2

This answer only applies if the date-picker doesn't show up at all. OP can view the date-picker at first click but not the second. – Martin Feb 17 '15 at 17:00
USE is-open="$parent.opened" AND ng-click="$parent.opened = true" – Sydwell Oct 27 '15 at 06:31

c_sandborg · Answer 4 · 2014-10-10T06:58:16.323

16

I had the same problem, but by simply putting the "opened" boolean var in an object solved the problem for me:

< .. is-open="datePicker.opened" >
...
$scope.datePicker = {opened:false};
$scope.openDate = function($event) {
     $event.preventDefault();
     $event.stopPropagation();
     $scope.datePicker.opened = true;
};

I have not used angular for that long but I think this is scope problem and then I learned that it is always good to have "a dot in the variable name"... ( datePicker.opened )

(I now see a post above with a similar solution. But I did not need to use the timeout. This code was enough.)

edited Oct 10 '14 at 06:58

answered Oct 09 '14 at 13:30

c_sandborg

161
1
3

this one solved the issue. $scope.opened ==> $scope.dataPic.did the trick – avi Apr 18 '15 at 18:02
This is the real solution.Thx – Reeebuuk May 16 '15 at 09:20

Abdellah Stands with Palestine · Answer 5 · 2014-08-19T15:22:47.170

11

I solved the problem like this :

In the html file:

<input is-open="opened"
       type="text" class="form-control" datepicker-popup="{{format}}" 
       ng-model="md" />

and in the Javascript file, i just added a timeout to 'notify' that it's closed in order to be able to open it again :

$scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
        setTimeout(function() {
            $scope.opened = false;
        }, 10);              
    };

edited Aug 19 '14 at 15:22

answered Aug 19 '14 at 11:56

Abdellah Stands with Palestine

5,032
1
26
36

Its best to use $timeout from angular itself, its safer. – jeveloper Oct 10 '14 at 18:42
@jeveloper If you try to replace setTimeout with $timeout it simply doesn't work. – Davide Pastore Dec 15 '14 at 11:34
@DavidePastore You need to inject $timeout into your controller. Reference: https://docs.angularjs.org/api/ng/service/$timeout – jeveloper Dec 16 '14 at 12:34
1

Already done and when it opens it closes after 10 milliseconds. – Davide Pastore Dec 16 '14 at 13:13

score 3 · Answer 6 · answered Sep 01 '15 at 22:31

I have the easiest, one-line solution that does not require container objects, function calls or other hassles like preventDefault. You don't even have to declare this in scope because undefined is evaluated as false.

...
  ng-click="dateOpened = !dateOpened"
...

I tested this with angular-ui 0.13.0 (Angular Bootstrap). This works because the invocation of ng-click is already trapping the default event.

score 2 · Answer 7 · answered Jan 29 '15 at 15:41

I solved this problem by adding changing is-open from "opened" to "$parent.opened" Like this.

seanControllers.controller('TracksController', ['$scope',
  function($scope) {
    $scope.openCalendar = function($event) {
      $event.preventDefault();
      $event.stopPropagation();

      $scope.opened = true;
    };
  }
]);

<form>
  <label>Eindtijd</label>
  <div class="input-group">
    <input type="text" class="form-control" datetime-picker="dd-MM-yyyy HH:mm" ng-model="track.eindtijd" is-open="$parent.opened" />
    <span class="input-group-btn">
 <button class="btn btn-default" type="button" ng-click="openCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
  </div>
</form>

Yes. Thats how KCMonkey solved it too. http://stackoverflow.com/a/24700317/3214856 — Aniket Sinha, Jan 30 '15 at 08:38

Sándor Tóth · Answer 8 · 2015-08-11T00:34:01.560

Just isolate your dataPicker state variables.

$scope.dataPickerStates = {
  open1:false,
  open2:false
}

then change your html to

<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="dataPickerStates.open1"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />

and finally your state changer method

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

that's it.

score 1 · Answer 9 · answered Oct 19 '15 at 20:58

1

Same problem but the above solutions did not work for me, turns out I wasnt including this file: ui-bootstrap-tpls-0.14.2.js.

Point is to make sure you are including all the files mentioned in the example documentation

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

Good Luck!

answered Oct 19 '15 at 20:58

Don F

1,963
2
15
18

Well, I think you must have downloaded the js file without the templates. As you've mentioned, download the js with the templates i.e having `tpls` in it, if you are not planning to have your own templates. – Aniket Sinha Oct 20 '15 at 06:02
Regardless of if you have your own non date picker templates - this file (ui-bootstrap-tpls-0.14.2.js) is required for the date pickers standard functionality. – Don F Oct 20 '15 at 15:50

Emitate · Answer 10 · 2014-09-15T20:57:06.897

Here is the explanation about this behaviour

AngularJS MTV Meetup: Best Practices (2012/12/11)

https://www.youtube.com/watch?feature=player_detailpage&v=ZhfUv0spHCY#t=1870

you can write it like this.

 <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="cdate.customStartDate" is-open="date_picker1.opened"  max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" class="input-md" />

In controller:

$scope.date_picker1 ={
    date: new Date(),
    opened: false;
 };
 $scope.open = function($event) {
     .....
     $scope.date_picker1.opened = true;
 };

score 0 · Answer 11 · edited Jun 20 '20 at 09:12

After looking at so many answers. What worked for me is something like below:

$scope.datePicker = {
  date_opened:false
}
$scope.open_from = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.datePicker.date_opened = true;
};

HTML Template:

<div class="input-group">
    <input name="date_obj_from" type="text" class="form-control" uib-
    datepicker-popup="dd-MMMM-yyyy" ng-model="date_obj_from" is-
    open="datePicker.date_opened" datepicker-options="dateOptions" 
    ng-required="true" close-text="Close" />
    <span class="input-group-btn">
       <button type="button" class="btn btn-default" ng-
    click="open_from($event)">
    <i class="glyphicon glyphicon-calendar"></i>
       </button>
    </span>
</div>

We do not have to involve $timeout fixing this issue. I mean why if someone does not need it. I fixed this issue by changing my attribue is-open="date_opened" to is-open="datePicker.date_opened". Always a best practice initializing key to you object.

Datepicker not opening twice in angular-ui version 0.11.0

11 Answers11

After looking at so many answers. What worked for me is something like below:

HTML Template:

Linked