CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-modal
Shashika
Shashika

Reputation: 1636

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?

Upvotes: 1

Views: 7434

Answers (6)

Germano Plebani
Germano Plebani

Reputation: 3625

Listen to the event show.bs.modal which occurs when the modal is about to be shown, so you can get the input instance when it's already created in the document to configure the datetimepicker.

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

Upvotes: 0

ijsnow
ijsnow

Reputation: 162

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

Upvotes: 7

Amit Adav
Amit Adav

Reputation: 1

Keeps this js before end of script. This works for me.

// Since confModal is essentially a nested modal it's enforceFocus method
// must be no-op'd or the following error results 
// "Uncaught RangeError: Maximum call stack size exceeded"
// But then when the nested modal is hidden we reset modal.enforceFocus
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

$confModal.on('hidden', function() {
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
});

Upvotes: -1

Tim Lewis
Tim Lewis

Reputation: 29258

I don't think you're targeting the correct element. You specify $("#StartTime")... which would look for an element in your HTML with an ID (#) of id="StartTime". Notice in your provided HTML that doesn't exist: 

<input type="text" class="form-control" value="'+startTime+'"/>'+

Either add an id id="startTime" or class class="form-control startTime and target it properly in your jQuery:

$(function () {
  $('#startTime').datetimepicker(); // # for ID
  // or
  $('.startTime').datetimepicker(); // . for class
});

Upvotes: 0

John H.
John H.

Reputation: 1

'StartTime' isn't found as as ID in your sample.

Perhaps you need to use '#editStartTme'

Upvotes: 0

kbonnelly
kbonnelly

Reputation: 189

add z-index above 1051 in class datepicker

add something like this in page or css

<style>
.datepicker{z-index:1151 !important;}
</style>

Upvotes: 0

Related Questions