我遇到了一个JQuery Datepicker的问题,它出现在我的html网站的一个实例的模态下 .

我在页面上的模态中使用多个Datepickers . 所有模态都可以正常工作,但其中一个模型中的Datepicker出现在模态下 . 它位于bootstrap导航栏内 .

我已经尝试更改输入的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>
    


<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>

所有的Datepickers都是单独调用的;

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

          } );

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

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

          } );

为了测试这个问题,我在模式上面的一个输入中包含了一个有问题的输入,而Datepicker在这个中运行正常;

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