Showing Bootstrap Datetimepicker inside popover

Question

I am using this code to fire the popup:

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>

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

My intention is to use Bootstrap DateTimePicker widget when the user clicks on the input inside the popover. I have tried using the solution offered in this SO question.

My modified jQuery code now looks:

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

I still get to see the datetimepicker NOT at the bottom of the input field but at the bottom of the whole popover. what am I missing? Please guide.

score 0 · Answer 1 · answered Jun 04 '16 at 02:55

You are missing some required div elements,

Depend your needs, possible solutions show the datepicker at bottom of input, the correct HTML....

If with icon

<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

And Without Icon

<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

Rest of the code & approach is all good.

Showing Bootstrap Datetimepicker inside popover

1 Answers1