问题
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.
回答1:
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!
回答2:
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" />
回答3:
Found answer on other StackOverflow question, just use is-open="$parent.isOpen"
https://stackoverflow.com/a/20213924/1596661
回答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.)
回答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);
};
回答6:
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.
回答7:
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>回答8:
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.
回答9:
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!
回答10:
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;
};
回答11:
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.
来源：https://stackoverflow.com/questions/23474054/datepicker-not-opening-twice-in-angular-ui-version-0-11-0