Change month and year does not work in modal loading window

Question

In my project, I use jquery datepicker.It works well on all pages, but it does not work in the bootstrap modal window. This is my code for downloading datepicker.

$("#StartDate").datepicker({ changeMonth : true, changeYear : true, dateFormat : "yy-mm-dd", }); 

Now I can not change the month and year from the datepicker drop-down list. How to fix this problem? Any help would be greatly appreciated.

Answer 1

When searching for more details about this, I found fooobar.com/questions/188212 / .... Here is some working code taken from there:

 var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; $.fn.modal.Constructor.prototype.enforceFocus = function() {}; 

Answer 2

Try it.

Why aren't you using bootstrap datepicker?

 <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script> </div> </div> 

Answer 3

If a modal already exists, you can try delegating events as indicated in this.

 $(function() { $("body").delegate("#StartDate", "focusin", function(){ $(this).datepicker(); }); }); 

Another thing you can try is to increase the z-index of the StartDate text field

 #StartDate { z-index: 100000; } 

Answer 4

This should definitely work. I made a fiddle with jquery ui datepicker in a modal window. check this out: https://jsfiddle.net/kr20nu8n/2/

HTML:

 <button id="openModalButton">open modal</button> <div id="myModal" class="modal"> <div class="modal-dialog"> <div class="modal-content"> <input placeholder="click for datepicker" type="text" id="datepicker"> </div> </div> </div> 

JS:

 $("#datepicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm-dd", }); $("#openModalButton").click(function () { $('#myModal').modal(); }); 

Perhaps if you could post your full code, we might find an error that causes this.

Answer 5

 <input class="form-control" type="text" data-provide="datepicker" data-date-format="yyyy/mm/dd" data-date-autoClose="true"/> 

Try it. It works fine in Chrome. By the way, I am using bootstarp datepicker!