CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapdatedatepicker
Dribel
Dribel

Reputation: 495

Close date picker when clicking to next date picker AngularJS

I have multiple date pickers in my form. On default those are closed and once a date is selected, they close again. Also, even if I dont select a date and just click outside of it, it'll close automatically.

However, when I open the first date and do not click outside or choose a certain date and then simply open the second date picker, the first date picker stays open.

How can I avoid that and also make sure, that even when clicking to the second datepicker the first closes automatically?

           <button type="button" id="dateButton" class="btn btn-default" ng-click="open($event,'dt')" >
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt"
                 is-open="datepicker.dt" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true"
                 datepicker-options="dateOptions" show-button-bar="false" readonly="readonly"/>
        </button>

        <button type="button" id="dateButton" class="btn btn-default" ng-click="open($event,'dt2')" >
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt2"
                 is-open="datepicker.dt2" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true"
                  show-button-bar="false" readonly="readonly"/>
        </button>

_

$scope.datepicker={
  dt:false,
  dt2:false
};
$scope.open = function($event,which) {
  $event.preventDefault();
  $event.stopPropagation();

  $scope.datepicker[which] = true;
};
$scope.format = 'dd-MMM-yyyy';

Here is what I did: plnkr.co/edit/o9I3cRej9I7rZUcPpz6O?p=preview You see if you click one datepicker but then simply click the other one the first one will not close

Upvotes: 1

Views: 4708

Answers (1)

sansari
sansari

Reputation: 558

You are using the same name in is-from attribute which is "datepicker.dt". And you pass 'dt' to your open function. So if you have the same html code for multiple datepickers, you are opening all together.

You need to define different is-open names for different datePickers and it is more convenient to define different open functions for each of datePickers. Then what you need is just set the is-open attribute to true for associated datePicker's function.

	  $scope.openDt1 = function($event) {
		    $event.preventDefault();
		    $event.stopPropagation();

		    $scope.datepicker.dt1 = true;
		  };

	  $scope.openDt2 = function($event) {
		    $event.preventDefault();
		    $event.stopPropagation();

		    $scope.datepicker.dt1 = true;
		  };
    <button type="button" id="dateButton" class="btn btn-default" ng-click="openDt1($event)">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt"
                 is-open="datepicker.dt1" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true"
                 datepicker-options="dateOptions" show-button-bar="false" readonly="readonly"/>
    </button>

    <button type="button" id="dateButton" class="btn btn-default" ng-click="openDt2($event)">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt"
                 is-open="datepicker.dt2" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true"
                 datepicker-options="dateOptions" show-button-bar="false" readonly="readonly"/>
    </button>

Upvotes: 1

Related Questions