CODEWITHSUNDEEP
javascriptangularjsdatepickerbootstrap-datepicker
Senthil SK
Senthil SK

Reputation: 77

Need to open the datepicker popup on click of the calendar icon instead of clicking on the input field

my below datepicker code is like below. Its working fine. But the datepicker popup opens when i click on the input field. But want that to be open once i click on the calendar icon. Please suggest me a way to achieve that.

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

      };

Angular : 1.6 Using 'ui.bootstrap.datetimepicker', and 'ui.bootstrap

Upvotes: 0

Views: 1578

Answers (1)

AryKay
AryKay

Reputation: 308

You'll need to add ng-click="model.dateFrom=true" as an attribute to the <i> element containing your calendar icon, not its parent span.

I would actually recommend writing a separate function for toggling the datepicker on and off. Something like

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

and then calling that from your html: ng-click="toggleDatePicker()"

Upvotes: 1

Related Questions