Geek Answers Handbook

JQuery Datepicker on Twitter Bootstrap 3 Modal

Now I am trying to solve quite a few solutions, but I can not get it to work. I am trying to get a figurine in my form. The form is placed inside the bootstrap mod, and the whole thing is loaded via ajax. Everything works fine, except for the datepicker, which does not appear at all when placed in modal mode.

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

Here is my datpicker:

$(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); }
+6
source share
4 answers

The modal is probably loaded after adding .datepicker() , you should evaluate this 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" }); }
+3
source

If you call this code in a ready () document

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

There is no form with datepicker, so it is not initialized

call it again after loading the form.

this shoudl fix your problem

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

I think you are making this mistake ....

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

+1
source

It looks like I have exactly the same problem. I have a datepicker in my modal mode, and datepicker works fine the first time I open my screen, but the second time nothing happens when you press the date field, and any further openings of the modal date picker no longer work. I have not looked too deeply into this code, but it seems that the date picker code should look for when it has a datepicker ui object and then no longer works.

To solve this problem, I run it when I open my modal code:

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

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

0
source

More articles:


All Articles