我遇到了一个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' />