javascript - jQuery Datepicker i Twitter Bootstrap 3 Modal
Jeg har nu prøvet en hel del løsninger på dette problem, men jeg kan ikke få det til at virke. Jeg prøver at få en datovælger ind i min formular. Formularen er placeret inde i en Bootstrap-modal, og hele tinget bliver indlæst via AJAX. Alt fungerer fint undtagen datovælgeren, som slet ikke vises, når den er placeret i modalen.
Jeg håbede, at en simpel løsning som: .datepicker {z-index:9999 !important;} ville virke, men det gør den ikke. Ved nogen, om der findes en simpel løsning på dette?
Her er min datovælger:
$(function() {
$( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
Her er min formular:
<form action="" method="post">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Endre artikkel</h4>
</div>
<div class="modal-body">
<label for="arrived">Motatt</label>
<input type="text" name="arrived" class="form-control datepicker" id="arrived">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</form>
Formularen indlæses i denne div:
<div class="modal fade" id="load_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 1040;"></div>
Med dette javascript:
function edit_article(id){
$("#load_modal").load("load_modal.cgi?type=edit&id="+id);
}
Svar #1
Modalen bliver sandsynligvis indlæst, efter du tilføjer .datepicker(), du bør evaluere den kode efter indlæsning af formularen.
function edit_article(id){
$("#load_modal").load("load_modal.cgi?type=edit&id="+id);
$("#load_modal .datepicker").datepicker({ dateFormat: "yyyy-mm-dd" });
}
Svar #2
Hvis du kalder denne kode på document ready()
$(function() {
$( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
Der er ingen formular med datovælger, så den er ikke initialiseret
kald dette én gang til efter indlæsning af formular.
dette burde løse dit problem
