Comment forcer le calendrier Bootstrap à se concentrer et ouvrir sous la balise <i> lorsque vous cliquez sur l'entrée?

Question

J'ai un calendrier Bootstrap. Il s'ouvre lorsque je clique sur l'icône du calendrier mais il ne s'ouvre pas lorsque je clique sur l'entrée. Je veux que le calendrier s'ouvre sous l'icône du calendrier et non sous l'élément d'entrée lorsque vous cliquez sur l'entrée.

<div class="input-append date" id="dp3" data-date="11/03/2017" data-date-format="dd/mm/yyyy"> 
<input class="span2" id="dp2" size="16" type="text" value="11/03/2017"> 
<span class="add-on"><i class="icon-calendar"></i></span> 
</div> 
<script> 
    $(document).ready(function() { 
      $('#dp3').datepicker({ 
        format: 'dd/mm/yyyy' 
       }) 
        .on('changeDate', function(){ 
         $('#dp3').datepicker('hide'); 
        }); 

     $('#dp2').click(function(event){ 
     event.preventDefault(); 
     $('#dp3').datepicker({ 
        format: 'dd/mm/yyyy' 
       }) 
        .on('changeDate', function(){ 

         $('#dp3').datepicker('hide'); 
        }); 
    }); 
     </script> 

Answer 1

Je pense que les questions simples ne sont pas répondues ici. Au lieu de cliquer sur le bouton de validation, il serait utile de fournir un exemple de lien. Quoi qu'il en soit a pris plus d'une demi-heure, mais il a fait pour que ce soit très simple. n'a pas pensé à utiliser

$(document).ready(function() { 

     $("#dp3").datepicker(); 

     $('#dp2').click(function() { 
      $('#dp3').datepicker('show'); 
     }); 
    });