Shashika Shashika - 1 month ago 7
HTML Question

bootstrap datetimepicker does not work in a bootstrap modal

I need to use bootstrap datetimepicker in a bootstrap modal. I've successfully used it in a normal web page. The bootstrap calender won't open in the modal. Here is my dynamically generated

html
code.

'<div class="col-xs-12">'+
'<div class="col-xs-4">'+
'<div class="form-group">'+
'<label for="editStartTime">Start Time </label>'+
'<div class="input-group date" id="editStartTime">'+
'<input type="text" class="form-control" value="'+startTime+'"/>'+
'<span class="input-group-addon">'+
'<span class="glyphicon glyphicon-calendar"></span>'+
'</span>'+
'</div>'+
'</div>'+
'</div>'


This is the
jquery
part.

$(function () {
$('#editStartTime').datetimepicker();
});


what will be the issue?

Answer

You need to instantiate the datepicker again after the dynamic html is added to the DOM. You could call it on the bootstrap modal shown event:

$('.modal').on('shown.bs.modal', function () {
  $('#editStartTime').datetimepicker();
}