У меня проблема с позиционированием JQuery Datepicker ПОД модальным, в котором содержится вход

Question

У меня возникла проблема с JQuery Datepicker, который отображается под модальным в одном экземпляре моего сайта html.

Я использую несколько DatePicker в модалах на странице.Все модалы работают нормально, но Datepicker в одном из них появляется ПОД модалом.Он находится внутри загрузочной панели навигации.

Я попытался изменить z-index для ввода, но безуспешно.

<form id='form1a' style='width:494px' class="modal-content animate" method="post" action="todoEntry_processing.php">


  <div class="container-modal">

    <label>Date</label>
    <input style='width: 100%; height:44px; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; background:rgb(250, 255, 189)' name='dater' id='datepicker20' form='form1a' autocomplete='off' />

    <button class="button-modal-input" style="width:140px" type="submit" onclick>Submit</button>
    <br/><br/><br/>
    <button class="button-modal-input" style="width:140px; background-color: #f44336" type="button" onclick="document.getElementById('id01a').style.display='none'" class="cancelbtn">Cancel</button>

  </div>

</form>

Все средства выбора даты вызываются по отдельности;

          $( function() {
              $( "#datepicker18" ).datepicker({ dateFormat: 'dd-mm-yy'}).val();

          } );

          $( function() {
              $( "#datepicker19" ).datepicker({ dateFormat: 'dd-mm-yy'}).val();

          } );
          $( function() {
              $( "#datepicker20" ).datepicker({ dateFormat: 'dd-mm-yy'}).val();

          } );

Чтобы проверить проблему, я включил вход непосредственно над модалом, в котором возникла проблема, и средство выбора даты прекрасно работает в этом;

            <label>Date</label>
            <input class="form-control modal-general-input "  name='dater' id='datepicker19' form='form3' required='required' autocomplete='off' />