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">&times;</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