Datepicker不顯示在Bootstrap popover上

Question

我使用一個簡單的Bootstrap pophover，但是當我在這個pophover下插入Datepicker時我遇到問題，然后Datepicker它沒有顯示。 但是，如果我不在pophover下插入它，正常的Datepicker是有效的。

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

Answer 1

您可以在data-content=''屬性中使用popover html內容

<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"/>

然后寫下以下腳本：

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

注意：在此<div id="popover-content" class="hide"> remove class="hide"

Answer 2

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

試試這個。