Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

move the position of bootstrap datepicker

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

like image 253
Surya Avatar asked Oct 20 '16 09:10

Surya


3 Answers

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

like image 194
Leo the lion Avatar answered Oct 18 '22 23:10

Leo the lion


Simply you can use followed code sample;

$('#input').datepicker({
    orientation: "top right"
});
like image 39
mantissa Avatar answered Oct 19 '22 00:10

mantissa


For change the default Bootstrap datetimepicker:

1-) From Jquery

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

Others positions options: bottom-left, top-right

like image 20
dCrystal Avatar answered Oct 19 '22 00:10

dCrystal