Я использую директиву Bootprap UI datepicker, и я пытаюсь создать кнопку datepicker, которая открывает всплывающее окно datepicker, как в исходном примере, но оно не работает в модальном окне.
Смотрите PLUNKER
Что я делаю неправильно?
Я использую директиву Bootprap UI datepicker, и я пытаюсь создать кнопку datepicker, которая открывает всплывающее окно datepicker, как в исходном примере, но оно не работает в модальном окне.
Смотрите PLUNKER
Что я делаю неправильно?
Просто измените на: is-open="opened"
на:
is-open="$parent.opened"
Исправлено демо Plunker
Соответствующие фрагменты HTML будут выглядеть так:
<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>
Мне пришлось поставить таймаут, чтобы он работал:
function toggleStart($event) {
$event.preventDefault();
$event.stopPropagation();
$timeout(function () {
vm.isStartOpen = !vm.isStartOpen;
});
}
Мой шаблон выглядит так:
<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>
Директива datepicker создает свою собственную область, которая недоступна для наружного. Чтобы решить эту проблему, вы можете использовать.
$parent.isopen
или используйте некоторое имя свойства объекта, чтобы избежать наследования прототипов, например
$scope.config.isopen=true;
ng-model="config.isopen"
вместо ng-model="isopen"
.
Вы также работаете так, чтобы инициализировать подборщик дат значком.
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;
};
Вам не нужна функция open
:
<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>