Bootstrap Datepicker Appearing At Incorrect Location in a Modal

Bootstrap Datepicker appearing at incorrect location in a modal

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!

bootstrap datepicker opening at wrong position

looks like you did an override of the rules for .dropdown-menu in style.css line 238 right: 0 !important;... maybe for a menu?. It's either you increase the specificity of that rule to match exactly where you want it changed, or it will continue to apply to any element with class .dropdown-menu, which I believe is also used by the date-picker html.

Good luck mate

bootstrap date picker position

When using anything new in programming it's best to consult the documentation for the tool in question to discover what you can and can't do. In this case I did a google search for the bootstrap-datepicker and I found the docs here: Options Doc

after reading the docs you'll find there is a property called orientation you can set. Revising your options variable to the following should correct your issue:

var options={
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
            orientation: 'bottom'
        };

Let me know how that goes!

Datepicker shown wrong position

There should be a css conflict, since you've also tagged bootstrap. Jquery UI is known to have problems with bootstrap. There is a Jquery UI theme suitable for bootstrap, you can try it.

For a quick fix, try adding following css to idTourDateDetails:

position: relative;
z-index: 100000;

This might give the datepicker the correct z-index.

Bootstrap datepicker in modal not working

The datepicker is hiding behind the modal.

Set datepicker's z-index above the modal's which is 1050.

Additionally wrap your datepicker code in bootstrap's modal shown event.

$('#myModal').on('shown.bs.modal', function() {  $('.input-group.date').datepicker({    format: "dd/mm/yyyy",    startDate: "01-01-2015",    endDate: "01-01-2020",    todayBtn: "linked",    autoclose: true,    todayHighlight: true,    container: '#myModal modal-body'  });});
$("[id=add]").click(function() {  $("#myModal .modal-header h4").html("Request for Change");  $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></form>');  $("#myModal").modal("show");});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<style>    .datepicker {      z-index: 1600 !important; /* has to be larger than 1050 */    }</style>
<div class="well">  <button type="button" id="add">Add</button></div><div id="myModal" class="modal">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <h4></h4>      </div>      <div class="modal-body">      </div>    </div>  </div></div>

Bootstrap datetimepicker strange positioning on a different div altogether

You are missing an .input-group wrapper which has a position value of "relative". Since the datepicker is absolutely positioned it's container needs to be relatively positioned for the datepicker to be positioned correctly.

So I believe something like this would work:

.values {
    position: relative;
    overflow: hidden;
    margin-left: 100px;
}

Better yet, let's set position relative on the divs that actually hold our inputs like so:

#starttimepicker {
  position: relative;
}

#endtimepicker {
  position: relative;
}

If you want my opinion though that is not very DRY. If you have control over the html you might try to add a class of "values__datepicker" (or whatever class) to #starttimepicker and #endtimepicker and set just one CSS rule like so:

.values__datepicker {
  position: relative;
}

move the position of bootstrap datepicker

What you need is little bit of jquery

see here

JQuery

$('#datetimepicker1').click(function(){
    var popup =$(this).offset();
    var popupTop = popup.top - 40;
    $('.ui-datepicker').css({
      'top' : popupTop
     });
});

About positioning of datepicker read here

Bootstrap datepicker issue in modal

You need to call datepicker() on the datepicker element when it is actually rendered. This means when the modal with the element is rendered.

If necessary put a breakpoint before the

$('#expiry_date').datetimepicker
and make sure the element is there in the DOM.

Remove your onclick method, you don't need to initialize the datepicker when there is a click event. This probably caused the weird - one time opened, one time not - behaviour.

Bootstrap Datepicker Appearing At Incorrect Location in a Modal