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?
asked Nov 26, 2013 at 9:19
Kjartan Valur Þórðarson
1,2091 gold badge13 silver badges32 bronze badges
Add a comment
|
5 Answers
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>
10 Comments
Soichi Hayashi
I was scratching my head over this.. Thank you for posting this solution! And how would anyone know to do this!?
Maxim Shoustin
@SoichiHayashi The $parent.xxxx will will prevent the child scope from creating its own property. I think this is is what datepicker does.
opyate
Or something about modals transcluding the scope, yada yada. Not entirely obvious ;-)
AdityaSaxena
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
Neil
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)
|
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>
1 Comment
Dan Cohen
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.
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".
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;
};
Comments
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>
