Datepicker not opening twice in angular-ui version 0.11.0
Solution 1
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" />
Solution 2
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!
Solution 3
Found answer on other StackOverflow question, just use is-open="$parent.isOpen"
https://stackoverflow.com/a/20213924/1596661
Solution 4
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.)
Solution 5
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);
};
Aniket Sinha
Learning Django/Python and Spring framework these days. Learning AngularJS. Loving it. Learning Java. Loving it. Learning AWS. Loving it. Top 31 AngularJS user in India
Updated on February 15, 2020Comments
-
Aniket Sinha about 4 years
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.
-
Aniket Sinha almost 10 yearsGreat, can you give a Plunk for your solution.
-
Artiom almost 10 years@AniketSinha plnkr.co/edit/NuoBQe?p=info. This happened to me in the modal window as described here stackoverflow.com/questions/18716113/…
-
geilt almost 10 yearsIt has to do with the data being a Primitive. They suggest to avoid primitives if possible (data that isnt part of an object). codelord.net/2014/05/10/…
-
tomazahlin almost 10 yearsWorked for me. It is probably not the best solution, but it works for now. Also, remember to inject the $timeout service in the controller.
-
HMR over 9 yearsSpent 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.
-
Mark B over 9 yearsThis 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.
-
Aditya Sethi over 9 yearsWonderful, this makes this directive so simple. I wonder why people need buttons to handle the date picker :P
-
jeveloper over 9 yearsIts best to use $timeout from angular itself, its safer.
-
Davide Pastore over 9 years@jeveloper If you try to replace setTimeout with $timeout it simply doesn't work.
-
Davide Pastore over 9 yearsIt doesn't work so well for me. When I try to change the month it simply closes the datepicker.
-
jeveloper over 9 years@DavidePastore You need to inject $timeout into your controller. Reference: docs.angularjs.org/api/ng/service/$timeout
-
Davide Pastore over 9 yearsAlready done and when it opens it closes after 10 milliseconds.
-
Aniket Sinha over 9 yearsYes. Thats how KCMonkey solved it too. stackoverflow.com/a/24700317/3214856
-
Post Impatica about 9 yearsLike you said, I created '$scope.opened = { yesOpen: false };' in my controller and this worked when using 'opened.yesOpen' Thanks!
-
Martin about 9 yearsThis 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 about 9 yearsThanks a lot! Been working with this for hours, managed to get it to work without the extra timeout function.
-
Martin about 9 yearsIt is important to highlight that moving the open flag "one level deeper", as answered by Exermel was what actually solved the issue.
-
Roy Ling about 9 yearsI did the same workaround by changing
is_open
model one level deeper. And there's issue withng-model
binding as well, that ifng-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"
. -
avi about 9 yearsthis one solved the issue. $scope.opened ==> $scope.dataPic.did the trick
-
Reeebuuk almost 9 yearsThis is the real solution.Thx
-
flapas almost 9 yearsThey addressed this kind of problems on their FAQ. 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! -
user3718908x100 over 8 yearsOnly had to add $timeout to get mine to work, thanks :)
-
Aniket Sinha over 8 yearsWell, 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. -
Don F over 8 yearsRegardless 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.
-
Sydwell over 8 yearsUSE is-open="$parent.opened" AND ng-click="$parent.opened = true"