8

enter image description hereCan 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

enter image description here

<div class="datepick col-sm-6">
                            <div class='input-group date' id='datetimepicker1' >
                                <input type='text' class="form-control" placeholder="Select Start Date"/>
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                    </div>
    <script>
     $('#datetimepicker1').datepicker({
            autoclose: true,
            startDate: '-0m',
            todayHighlight: true
        }).on('changeDate', function(ev){
            $('#sDate1').text($('#datetimepicker1').data('date'));
            $('#datetimepicker1').datepicker('hide');
        });
    </script>

enter image description here

Surya
  • 628
  • 3
  • 9
  • 26

5 Answers5

6

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

Community
  • 1
  • 1
Leo the lion
  • 3,164
  • 2
  • 22
  • 40
  • The accepted answer for this question is actually not for the jQuery UI Datepicker. 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. – Surya Oct 20 '16 at 09:47
  • The above answer helped me . Thanks a lot – Surya Oct 20 '16 at 09:48
  • If this helps you then please accept this as answer so users with similar issue can find it useful. Thank you – Leo the lion Oct 20 '16 at 09:48
5

Simply you can use followed code sample;

$('#input').datepicker({
    orientation: "top right"
});
mantissa
  • 147
  • 3
  • 14
  • Then you can get dynamically datepicker's current left position and input width and you can set new left position dynamically like that [new_left = current_left + input_width] – mantissa Oct 20 '16 at 09:37
  • This is working for me, with bootstrap-datepicker 1.8.0 – Eduard Luca Sep 07 '18 at 14:06
4

For change the default Bootstrap datetimepicker:

1-) From Jquery

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

Others positions options: bottom-left, top-right

dCrystal
  • 584
  • 5
  • 11
1

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">
  <input type="text" class="datepicker">
</div>
<div id="custom-pos"></div>

JS:

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

CSS:

#custom-pos {
  position: relative;
  right: -70px;
}
.dropdown-menu {
   left: auto !important;
}
giri-jeedigunta
  • 191
  • 2
  • 6
0

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.

Qammar Feroz
  • 708
  • 8
  • 21