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 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!
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" />
Found answer on other StackOverflow question, just use is-open="$parent.isOpen"
https://stackoverflow.com/a/20213924/1596661
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With