web-dev-qa-db-fra.com

Datepicker ne s'ouvre pas deux fois dans angular-ui version 0.11.0

J'essaie d'avoir 2 datepickers et j'utilise la version 0.11.0 de l'interface utilisateur angulaire.

Mon code HTML

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

et mon code JS est `

                     $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
                     };

` Au début, lorsque je clique sur le bouton, le sélecteur de date s'ouvre parfaitement. Mais une fois qu'il a été ouvert une fois, le problème est que le popup datepicker ne s'ouvre pas la prochaine fois que je clique sur le bouton.

javascriptangularjsdatepickerangular-uiangular-ui-bootstrap
39
Aniket Sinha

Solution rapide: Suppression totale de la balise button et modification du code datepicker afin qu'il ressemble à ceci:

<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" />
41
Aniket Sinha

J'avais le même problème, je ne pouvais ouvrir le contrôle du sélecteur de date qu'une seule fois à l'aide du bouton, mais il ne s'ouvrirait pas une seconde fois. Le problème peut être lié à un problème de portée qui pourrait survenir car le bouton n'est pas un enfant de l'élément HTML en entrée. J'ai réussi à faire fonctionner le bouton en modifiant un peu le modèle de données. Par exemple, au lieu d'utiliser $scope.isDatePickerOpen comme modèle, j'ai changé pour $scope.datePicker.isOpen (et définir is-open="datePicker.isOpen"). Notez que le nouveau modèle de données pour is-open ne se bloque pas directement à partir de $scope, mais a été déplacé d'un niveau (par rapport à l'objet $scope.datePicker). Cela semble rendre les données plus "trouvables". 

L'autre chose que je devais faire était de changer le modèle de données sur une minuterie. Par exemple:

$scope.openDatePicker = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $timeout( function(){
     $scope.datePicker.isOpen = true;  
  }, 50);
};

Quoi qu’il en soit, la solution proposée ci-dessus a été ce qui m’a motivé à continuer à chercher une solution, alors merci!

55
Exemel

Réponse trouvée sur une autre question StackOverflow, utilisez simplement is-open = "$ parent.isOpen"

https://stackoverflow.com/a/20213924/1596661

31
KCWebMonkey

J'ai eu le même problème, mais en mettant simplement le "boolean var" "ouvert" dans un objet a résolu le problème pour moi:

< .. is-open="datePicker.opened" >
...
$scope.datePicker = {opened:false};
$scope.openDate = function($event) {
     $event.preventDefault();
     $event.stopPropagation();
     $scope.datePicker.opened = true;
};

Je n'ai pas utilisé angular depuis si longtemps, mais je pense que c'est un problème de portée et j'ai ensuite appris qu'il est toujours bon d'avoir "un point dans le nom de la variable" ... (datePicker.opened)

(Je vois maintenant un message ci-dessus avec une solution similaire. Mais je n'avais pas besoin d'utiliser le délai d'attente. Ce code suffisait.)

16
c_sandborg

J'ai résolu le problème comme ceci:

Dans le fichier html:

<input is-open="opened"
       type="text" class="form-control" datepicker-popup="{{format}}" 
       ng-model="md" />

et dans le fichier Javascript, je viens d'ajouter un délai d'attente pour 'notifier' qu'il est fermé afin de pouvoir le rouvrir: 

$scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
        setTimeout(function() {
            $scope.opened = false;
        }, 10);              
    };
11
Abdellah Alaoui

J'ai la solution la plus simple sur une ligne qui ne nécessite pas d'objets conteneur, d'appels de fonction ou d'autres problèmes tels que preventDefault. Vous n'êtes même pas obligé de déclarer cela dans la portée, car indéfini est évalué comme faux.

...
  ng-click="dateOpened = !dateOpened"
...

J'ai testé cela avec angular-ui 0.13.0 (Angular Bootstrap). Cela fonctionne car l'invocation de ng-click intercepte déjà l'événement par défaut.

3
FlavorScape

J'ai résolu ce problème en ajoutant la modification de is-open de "open" à "$ parent.opened".

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>

2
PieterVK

Il suffit d’isoler vos variables d’état dataPicker. 

$scope.dataPickerStates = {
  open1:false,
  open2:false
}

puis changez votre code HTML en 

<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" />

et enfin votre méthode de changement d'état

$scope.open = function($event, opened) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.datePickerStates[opened] = true;
};

c'est tout. 

2
Sándor Tóth

Même problème, mais les solutions ci-dessus ne fonctionnaient pas pour moi. Il s'avère que je n'ai pas inclus ce fichier: ui-bootstrap-tpls-0.14.2.js. 

L’essentiel est de s’assurer que vous incluez tous les fichiers mentionnés dans la documentation fournie à titre d’exemple 

<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">

Bonne chance!

1
Don F

Après avoir examiné tant de réponses. Ce qui a fonctionné pour moi est quelque chose comme ci-dessous:

$scope.datePicker = {
  date_opened:false
}
$scope.open_from = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.datePicker.date_opened = true;
};

Modèle HTML:

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

Nous n'avons pas à impliquer $ timeout pour résoudre ce problème. Je veux dire pourquoi, si quelqu'un n'en a pas besoin ... J'ai résolu ce problème en changeant mon attribut is-open = "date_opened" en is-open = "datePicker.date_opened" . Toujours une clé d'initialisation de meilleure pratique objet.

0
Shoaib Ahmad

Voici l'explication à propos de ce comportement 

Meetup AngularJS MTV: Meilleures pratiques (2012/12/11) 

http://www.youtube.com/watch?feature=player_detailpage&v=ZhfUv0spHCY#t=1870

vous pouvez l'écrire comme ça.

 <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" />

Dans le contrôleur:

$scope.date_picker1 ={
    date: new Date(),
    opened: false;
 };
 $scope.open = function($event) {
     .....
     $scope.date_picker1.opened = true;
 };
0
Emitate