Show event was called multiple times in bootstrap-datepicker event

Question

I am showing datepicker control using bootstrap-datepicker I want to call one custom javascript event before open the datepicker popup

I did the code like bellow var date = $(id).datepicker({});

$(date).on('show.bs.modal', function (e) {
       e.stopPropagation();
    }).on('hide.bs.modal', function (e) {
       e.stopPropagation();
    });
}


 $(date).on('show',function (e) {
         alert(1);  
         return;
     });

When I open the datepicker the allert message '1' was keep on showing.

$(document).ready(function(){

   var dateObj =$('#DOB').datepicker()
   
   $(dateObj).on('show.bs.modal', function (e) {
            e.stopPropagation();
   }).on('hide.bs.modal', function (e) {
            e.stopPropagation();
   });
   
   $(dateObj).on('show', function (e) {
      alert(1); 
      return;
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<div class="form-group required">
  <label class="control-label" for="DOB">Normal  Date<span></span>     </label>
  <input class="form-control input-singleDate calendarIcon" id="DOB"    name="DOB" placeholder="Select Date"   type="text">
</div>

Answer 1

What's happening is you are focusing on alert and then the focus is shifted to the datetime picker triggering the event again.

If you change the alert to console.log(1); It will fire correctly.