javascript - jQuery Datepicker in Twitter Bootstrap 3 Modal - Stack Overflow

admin管理员组

文章数量:1349217

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

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

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

Share Improve this question Follow edited May 28, 2014 at 21:39 random_user_name 26.2k77 gold badges8080 silver badges118118 bronze badges asked Jan 29, 2014 at 13:25 TwistarTwistar 78255 gold badges2121 silver badges3535 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

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

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

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

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

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();

本文标签： javascriptjQuery Datepicker in Twitter Bootstrap 3 ModalStack Overflow