Move The Position Of Bootstrap Datepicker

Question

Can I able to move the datepicker near the calender icon ??? Any fix for this would be appreciated. datepicker is generated dynamically. I have given id to div

Solution 1:

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

Solution 2:

Simply you can use followed code sample;

$('#input').datepicker({
    orientation: "top right"
});

Solution 3:

For change the default Bootstrap datetimepicker:

1-) From Jquery

$("#datetimepicker1").datetimepicker({
     pickerPosition: 'top-left'
});

Others positions options: bottom-left, top-right

Solution 4:

The 'container' option available in the plugin might come in handy. You can use CSS to position the calendar wherever you need it. Here is an example I have created on jsFiddle.

https://jsfiddle.net/giri_jeedigunta/6patf4L5/

HTML:

<div class="dt-cont">
  <inputtype="text"class="datepicker"></div><divid="custom-pos"></div>

JS:

$('.datepicker').datepicker({
  container: '#custom-pos'
});

CSS:

#custom-pos {
  position: relative;
  right: -70px;
}
.dropdown-menu {
   left: auto !important;
}

Solution 5:

You may override the default class of css of date picker. Add inline style to the div of date picker, for example,

change

<div class="datepick col-sm-6">

to

<div class="datepick col-sm-6" style="position: absolute; left: 865.15px; display: block;">

It will override the default css. You need to try different values for left property, to make it best fit on the form.

Html5 Works