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

我的意图是当用户点击popover中的输入时使用Bootstrap DateTimePicker小部件。我尝试使用this SO question中提供的解决方案。

我修改过的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 NOT不在输入字段的底部，而是在整个popover的底部。我错过了什么？请指导。

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>

Fiddle Example

没有图标

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

Fiddle Example

其余的代码＆amp;方法很好。

在popover中显示Bootstrap Datetimepicker

1 个答案: