Показ Bootstrap Datetimepicker внутри поповера

Question

Я использую этот код для запуска всплывающего окна:

HTML

<div class="popover-markup">
    <a href="#" class="trigger btn btn-default">Track</a>
    <div class="head hide">Track @item.FullName [@item.Id]</div>
    <div class="content hide">
        <div class="form-group">
            <label>Date Called:</label>
            <input type="text"
                   class="form-control dtp"
                   placeholder="Date called…">
        </div>
        </div>
    <span class="btn btn-info rr" id="abcd">Submit</span>
    </div>
</div>

И мой JQuery:

$('.popover-markup>.trigger').popover({
        html: true,
        title: function () {
            return $(this).parent().find('.head').html();
        },
        placement: "bottom",
        content: function () {
            return $(this).parent().find('.content').html();
        }
    });

Я намерен использовать виджет Bootstrap DateTimePicker, когда пользователь нажимает на вход внутри всплывающего окна. Я попытался использовать решение, предлагаемое в этом вопросе.

Мой модифицированный код jQuery теперь выглядит так:

$('.popover-markup>.trigger').popover({
        html: true,
        title: function () {
            return $(this).parent().find('.head').html();
        },
        placement: "bottom",
        content: function () {
            return $(this).parent().find('.content').html();
        }
    }).on('shown.bs.popover', function () {
        $('.dtp').datetimepicker();
});

Я все еще вижу, что datetimepicker находится не внизу поля ввода, а внизу всего всплывающего окна. что мне не хватает? Пожалуйста, руководство.

Answer 1

Вам не хватает некоторых обязательных div элементы,

Зависит от ваших потребностей, возможные решения показывают дату выбора внизу ввода, правильный HTML....

Если со значком

<div class="form-group">
  <label>Date Called:</label>
  <div class="input-group dtp">
    <input type="text" class="form-control" placeholder="Date called…">
    <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

Пример скрипки

И без значка

<div class="row">
  <div class='col-sm-12'>
      <label>Date Called:</label>
      <input type="text" class="form-control dtp" placeholder="Date called…">
  </div>
</div>

Пример скрипки

Остальная часть кода и подход все хорошо.