web-dev-qa-db-fra.com

ui.bootstrap.datepicker is-open ne fonctionne pas en modal

J'utilise la directive datepicker de l'interface utilisateur Bootstrap et j'essaie d'avoir un bouton datepicker qui ouvre la fenêtre contextuelle datepicker comme dans l'exemple d'origine mais cela ne fonctionne pas dans une fenêtre modale.

Voir PLUNKER

Qu'est-ce que je fais mal?

angularjsangularjs-directiveangular-ui
34
Kjartan Valur Þórðarson

Lire plus: 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>
96
Maxim Shoustin

J'ai dû mettre un timeout pour que ça marche: 

function toggleStart($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $timeout(function () {
        vm.isStartOpen = !vm.isStartOpen;
    });
}

Mon modèle ressemble à ceci:

<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>
13
pomber

la directive datepicker crée sa propre portée qui n'est pas accessible à l'extérieur.Pour résoudre ce problème, vous pouvez l'utiliser.

$parent.isopen

ou utilisez un nom de propriété Object pour éviter un héritage prototype, comme

$scope.config.isopen=true;

ng-model="config.isopen" au lieu de ng-model="isopen".

7
Aditya kumar

Vous n'avez pas vraiment besoin d'une fonction 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>
0
Sam Barnum

Vous travaillez également comme ça pour initialiser le sélecteur de date par icône.

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;
};
0
Bittu Singh