Müssen Sie das Datepicker-Popup bei Klick auf das Kalendersymbol öffnen, anstatt auf das Eingabefeld

Question

zu klicken. Mein unterster Datepicker-Code ist wie folgt. Es funktioniert gut. Aber das Datepicker-Popup öffnet sich, wenn ich auf das Eingabefeld klicke. Aber ich möchte, dass es geöffnet ist, sobald ich auf das Kalendersymbol klicke. Bitte schlage mir einen Weg vor, dies zu erreichen.

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

In My Controller:

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

     }; 

Eckig: 1.6 Mit 'ui.bootstrap.datetimepicker', und ‚ui.bootstrap

Answer 1

Sie benötigen ng-click="model.dateFrom=true" als hinzufügen Attribut an das <i> Element, das Ihr Kalendersymbol enthält, nicht dessen Elternspanne.

Ich würde eigentlich empfehlen, eine separate Funktion zum Ein- und Ausschalten des Datepickers zu schreiben. So etwas wie

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

und dann fordern, dass von Ihrem html: ng-click="toggleDatePicker()"