I have a datepicker placed inside a popover. Datepicker not working. Has any one did like this
<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"><i class="fa fa-calendar"></i> - <i class="fa fa-calendar"></i>
</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>
JS
$('#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();
}
});
Can someone spot the error?