score:2

Accepted answer

you should have a container with position: relative to let the plugin calculate the position correctly.

In your case the default container is the body, so you can either set

body {
  position: relative;
}

or better, define a different container in datepicker initialization:

$( ".date" ).datepicker({
  container: '.container',
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true
});

then set position relative to the .container class

.container {
  position: relative;
}

FIDDLE here

score:0

You could also just include a button tag in the markup with "btn" in the class so you don't have to change the source code but it may not fix your margin issue.

<div class="input-group date" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-append">
        <button type="button" class="btn btn-info"><span class="fa fa-calendar"></span></button>
    </div>
</div>

score:1

Add a container in your javascript:

  $( ".date" ).datepicker({
container: '.datepicker_wrapper'
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true
});

this makes the datepicker to be added as child of the .datepicker_wrapper in your html DOM, rather then being added at the bottom of your body. This way you can easily position it the way you want with position relative on the wrapper and absolute on the picker itself.

here the fiddle: https://jsfiddle.net/mh8h7jfe/2/

EDIT: updated the fiddle to differ between the 2 datepicker.

    $( ".datepicker_wrapper" ).datepicker({
container: '.datepicker_wrapper',
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true
});
$( ".datepicker_wrapper2" ).datepicker({
container: '.datepicker_wrapper',
  format: "dd-mm-yyyy",
  autoclose: true,
  todayHighlight: true
});

And css:

.datepicker_wrapper, .datepicker_wrapper2{
position:relative;
}

I now put in the html "datepicker_wrapper" and "datepicker_wrapper2" and call those 2 classes in JS aswell as using those classes as container.

This works fine for me


Related Query