DatePicker Inside Modal Not Working Bootstrap 4

[thatguy76]

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

[umbundu]

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!

[umbundu]

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