Implementing jQuery DatePicker in Bootstrap modal
Solution 1
This is because the modal enforces focus on itself. Here is a solution for this as mentioned here . Add the below script to your js file. That's it.
jQuery
// 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;
});
$confModal.modal({ backdrop : false });
For Bootstrap 4:
replace : $.fn.modal.Constructor.prototype.enforceFocus
By: $.fn.modal.Constructor.prototype._enforceFocus
Solution 2
jQuery
version of @crftr answer
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
try{
$confModal.on('hidden', function() {
$.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
});
$confModal.modal({ backdrop : false });
}
catch (error) {
if(error.name != 'ReferenceError')
throw error;
}
Solution 3
MORE EASY... just need to comment this line into your boostrap.js that.enforceFocus().
Sudipta Banerjee
Hi, I am Sudipta Banerjee. I love to work on projects, which challenges my technical skills. I also love to work on marketing and promoting your product and services. https://www.traveltechnology.in/
Updated on July 18, 2021Comments
-
Sudipta Banerjee almost 3 years
Created jsfiddle for my issue http://jsfiddle.net/sudiptabanerjee/93eTU/
In modal window issue is on Change Month and Change Year combos.
a) IE 11: everything is working as expected b) Chrome Version 31, On month combo select, bootstrap modal hides. c) Firefox v26, Month and Year dropdown is not functional.
Please help.
HTML
<!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <div class="col-md-12"> <div class="row"> <label for="idTourDateDetails">Tour Start Date:</label> <div class="form-group"> <div class="input-group"> <input type="text" name="idTourDateDetails" id="idTourDateDetails" readonly="readonly" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span> </div> </div>Alt Field: <input type="text" name="idTourDateDetailsHidden" id="idTourDateDetailsHidden"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal -->
CSS
.clsDatePicker { z-index: 100000; }
JS
$('#idTourDateDetails').datepicker({ dateFormat: 'dd-mm-yy', minDate: '+5d', changeMonth: true, changeYear: true, altField: "#idTourDateDetailsHidden", altFormat: "yy-mm-dd" });