Bootstrap Popover with HTML

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-sm-4">
    <button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" 
            data-placement="bottom" data-container="body" data-html="true" id="login">Date
    </button>
    <div id="popover-content" class="hide">
        <form role="form" method="post">
            <div class="form-group">
                <label>Start time?</label>
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" placeholder="Start Date time of event"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <label>End time?</label>
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" placeholder="End Date time"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <button class="btn btn-primary btn-block">Search between dates</button>
            </div>
        </form>
    </div>
</div>

JavaScript

$('#datetimepicker1').datetimepicker();

$('#datetimepicker2').datetimepicker();

$("#datetimepicker1").on("dp.change", function (e) {
    $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});

$("#datetimepicker2").on("dp.change", function (e) {
    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});

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