jQuery Datepicker in Twitter Bootstrap 3 Modal

Question

I have been trying quite a few solutions to this problem now but i can't get it to work. I trying to get a datepicker into my form. The form is placed inside a bootstrap modal and thw whole thing is loaded via ajax. Everything works fine except the datepicker that does not show at all when placed in the modal.

I was hoping that a simple solution like: .datepicker {z-index:9999 !important;} would work, but it does not. Does anybody know a simple solution for this?

Here is my datepicker:

$(function() {
    $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});

Here is my form:

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

The form is loaded into this div:

<div class="modal fade" id="load_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 1040;"></div>

With this javascript:

function edit_article(id){
    $("#load_modal").load("load_modal.cgi?type=edit&id="+id);
}

Answer 1

The modal is probably being loaded after you add the .datepicker() you should evaluate that code after loading the form.

function edit_article(id){
    $("#load_modal").load("load_modal.cgi?type=edit&id="+id);
    $("#load_modal .datepicker").datepicker({ dateFormat: "yyyy-mm-dd" });
}

Answer 2

If you call this code on the document ready()

 $(function() {
    $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
    });

There is no form with datepicker so it isn't initialized

call this once more after loading form.

this shoudl fix your problem