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

Answer 3

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

I think that you are doing this mistake....

kindly look at this link http://jsfiddle.net/TB8Yt/

Answer 4

It sounds like I'm having exactly the same problem. I have a datepicker in my modal, and the datepicker works fine the first time my screen opens, but the second time nothing happens when you click the date field, and any further opens of the modal the date picker no longer works. I haven't looked too deeply into this code, but it seems that the date picker code must look for when it has the datepicker ui object on, and then no longer runs.

To solve this I run this when I open my modal:

$("#modal").on('hidden.bs.modal', function() {
    $('#ui-datepicker-div').remove();
});

My date picker now works fine. This ui-datepicker-div is the one that datepicker automatically creates when you run $( ".datepicker" ).datepicker();