DatePicker Inside Modal Not Working Bootstrap 4
Opened this issue · 2 comments
I'm using Laravel 5.8 and Bootstrap 4. When using this date picker in a modal, if the month or next / previous buttons are clicked, the calendar just closes. Have you come across this before and know how to fix it? Thanks.
Here is my modal html:
<div class="modal fade" id="modalTaskForm" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="form-group">
<label for="startingDate" class="pb-1">Date</label>
<input type='text' class="input-sm form-control" id='startingDate' name="starting_date" value="" />
</div>
</div>
</div>
</div>
Here is my js:
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
$('#modalTaskForm').on('show.bs.modal', function (evt) {
window.myDatePicker = new DatePicker('#startingDate', {
datePickerClass: 'date-picker ',
closeOnSelect: false,
});
});
I tried all the suggestions made earlier but they do not work because I am using the date picker inside a modal on a ASP.NET page. If I move the date picker input field to anywhere on the page outside the modal then it works. Really crazy!
Greetings,
After reading the code again and the suggestions made by Mary Haak, I was able to get the date picker to work inside a modal. I changed the options as she suggested:
var options = {
body: document.querySelector("#my-modal-dialog"),
//instead of:
//body: document.body,
...
};
Clean and simple! Thank you so much for your help. I spent 2 hours trying to figure this out!
Cheers,
Everardo