Besoin d'ouvrir le popup datepicker sur le clic de l'icône du calendrier au lieu de cliquer sur le champ

Question

mon code ci-dessous datepicker est comme ci-dessous. Cela fonctionne bien. Mais le popup datepicker s'ouvre quand je clique sur le champ de saisie. Mais je veux que cela soit ouvert une fois que je clique sur l'icône du calendrier. S'il vous plaît, suggérez-moi un moyen d'y parvenir.

<div class="col-sm-6 col-md-6 col-lg-6 padleft"> 
    <div class="form-group"> 
     <label for="exampleSelect1">Start Date 
     </label> 
     <div class="input-group" style="width:75%"> 
     <div class="input-group-btn"> 
     <input type="text" 
     class="form-control date" 
     id="dateFrom" 
     placeholder="From" 
     ng-click="model.dateFrom=true" 
     datepicker-popup="{{model.format}}" 
     ng-model="model.defect.startDate" 
     is-open="model.dateFrom" 
     datepicker-options="dateOptions" 
     date-disabled="model.disabled(date, mode)" 
     ng-required="true" 
     close-text="Close" my-date> 
      <span class="btn btn-default " ng-click="model.dateFrom=true"><i class="glyphicon glyphicon-calendar"></i> </span> 
      </div> 
     </div> 
    </div> 
</div> 

Mon contrôleur:

 self.format = 'MM-dd-yyyy'; 
    self.open = function($event) { 

     $event.preventDefault(); 
     $event.stopPropagation(); 

     self.opened = {}; 
     self.opened[$event.target.id] = true; 

     // log this to check if its setting the log  
     console.log(self.opened); 

     }; 

angulaire: 1,6 En utilisant 'ui.bootstrap.datetimepicker', et « ui.bootstrap

Answer 1

Vous aurez besoin d'ajouter ng-click="model.dateFrom=true" comme Attribuez à l'élément <i> l'icône de votre calendrier, et non son intervalle parent.

Je recommanderais en fait d'écrire une fonction séparée pour activer et désactiver le sélecteur de date. Quelque chose comme

$scope.toggleDatePicker = function() { 
    $scope.model.dateFrom = !$scope.model.dateFrom; 
}; 

puis appeler cela de votre html: ng-click="toggleDatePicker()"