2017-10-19 21 views
1

J'utilise un simple pophover Bootstrap, Mais je fais face à un problème lorsque j'insère Datepicker sous ce pophover, puis Datepicker ce n'est pas afficher. mais, Datepicker normale est de travail si je ne l'insère pas sous pophover. enter image description hereDatepicker ne pas afficher sur popover Bootstrap

<div id="popover-content" class="hide"> 
       <form class="form-inline" role="form"> 
        <div class="clearfix "> 
         <div class="checkbox"> 
          <label> 
           <input id="asap" type="checkbox"> ASAP 
          </label> 
         </div> 
        </div> 
        <div class="clearfix hideevent"> 
         <div class="form-group"> 
          <div class="checkbox"> 
           <label> 
            <input name="morning" type="radio"> Morning 
           </label> 
          </div> 
          <div class="checkbox"> 
           <label> 
            <input name="morning" type="radio"> Evening 
           </label> 
          </div> 
         </div> 
         <input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text"/> 
        </div> 
       </form> 
      </div> 

$("[data-toggle=popover]").popover({ 
      html: true, 
      content: function() { 
       return $('#popover-content').html(); 
      } 
     }); 

$('#date').each(function() { 
      $(this).datepicker('clearDates'); 
     }); 

Répondre

2

Vous pouvez utiliser votre contenu html popover dans data-content='' attribut

<input type="text" data-content=' popover html paste here ' readonly id="PopS" data-placement="bottom" data-toggle="popover" data-html="true" placeholder="Quando" class="form-control" data-container="body"/>

Ensuite, écrire le script ci-dessous:

<script> 
$("#PopS").popover({ 
    html: true 
}).on('shown.bs.popover', function() { 
    $('#date').datepicker({ 
    format: 'dd/mm/yyyy', 
    }); 
}); 
</script> 

Note: dans ce <div id="popover-content" class="hide"> supprimer class="hide"

1
$('[data-toggle=popover]').on('show.bs.popover', function() { 
    $('#date').datepicker(); 
}) 

essayer celui-ci.