I have a button on a page that calls a modal having datepicker.
If this button is at top (I don't have to scroll page to click), modal opens and datepicker displays correctly.
But if this button is lower on the page( so that I have to scroll page to click), modal opens and datepicker displays incorrect. (NOT SURE if scrolling has a relation)
Here's the jsfiddle
Here's the image displaying problem, the datepicker should display above as a tooltip, but it goes down :
Here's the code :
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#callModal">Contact</button> <div class="modal fade" id="callModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <form role="form"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" placeholder="Enter name"> </div> <div class="form-group"> <label for="contact">Contact</label> <input type="text" class="form-control" id="contact" placeholder="Your mobile number"> </div> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <label for="cal">Date & Time</label> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" id="cal"/> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-danger">Contact </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
EDIT The datetimepicker tooltip is shifted by the amount by which I scroll the page before clicking the button "Contact" to appear the modal containing the datetimepicker.
To change the position of the jQuery UI Datepicker just modify . ui-datepicker in the css file. The size of the Datepicker can also be changed in this way, just adjust the font size.
Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document. ready functionality you could also move the script to the end of the body tag.
In order to set the date format, we only need to add format of one argument and then we will add our required format, which is shown in the following example: Example 1: In this example, we are going to use dd-mm-yyyy format.
I just ran into this same issue. I was able to solve it by adding a container attribute to the div.
$('#myDatePicker').datepicker({ container:'#myModalId' });
or if you are using the "lazy load" method as I was:
<input id='myDatePicker' data-provide='datepicker' data-date-container='#myModalId'>
Reference : http://bootstrap-datepicker.readthedocs.org/en/latest/options.html
Hope it helps someone else!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With