CODEWITHSUNDEEP
jquerycsstwitter-bootstrapdatepickerbootstrap-4
Paolo Rossi
Paolo Rossi

Reputation: 2510

Boostrap 4 and datepicker dropdown position

I'm using bootstrap 4 (final) with the boostrap-datepicker-plugin 1.7.1
Since Bootstrap 4 no longer uses .input-group-addon elements (for calendar icon) but .input-group-prepend and .input-group-append I modified the plugin code in this way

//this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .btn') : false;

this.component = this.element.hasClass('date') ? this.element.find('.input-group-prepend, .input-group-append, .btn') : false;

In this way the plugin seems to work well with the new input-group elements, but unfortunately if I add css margin to the container that contains the input of the datepicker, the dropdown-menu is shown in the wrong position.

Jsfiddle

I tried to find the solution to this problem, but without success. Someone can help me to fix this problem?

Thank you

Upvotes: 3

Views: 10274

Answers (3)

BusyBee
BusyBee

Reputation: 219

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>

Upvotes: 0

Marcel Schmid
Marcel Schmid

Reputation: 424

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

Upvotes: 1

pumpkinzzz
pumpkinzzz

Reputation: 2967

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

Upvotes: 2

Related Questions