jQuery Datepicker in Twitter Bootstrap 3 Modal

javascript, jquery, jquery-ui-datepicker, twitter-bootstrap, twitter-bootstrap-3

Solution

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" });
}

Problem

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); } ```

Original source