Bootstrap DateTime Picker not Showing properly its

Question

How to display full datetime picker in the screen. I tried position:relative but not working. Please help me.. HTML code :

<div style="position:relative">
<div class="input-group date form_startdatetime" data-date-format="dd M yyyy - HH:ii P" data-link-field="dtp_startdate">
     <input class="form-control" size="16" type="text" name="sDateTime" tabindex="7">
</div>
</div>
<script type="text/javascript" src="./datetimepicker3/jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./datetimepicker3/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./datetimepicker3/datetimepicker/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript">
$('.form_startdatetime').datetimepicker({
    //language:  'fr',
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1

});
</script>

See picture of output..

Answer 1

From Your comment, I see this in the documentation.

pickerPosition

String. Default: 'bottom-right' (other value supported : 'bottom-left')

This option is currently only available in the component implementation. With it, you can place the picker just under the input field.

I am adding a sample example for better understanding of Positioning.

<div class="input-append date form_datetime">
    <input size="16" type="text" value="" readonly>
    <span class="add-on"><i class="icon-th"></i></span>
</div>

<script type="text/javascript">
    $(".form_datetime").datetimepicker({
        format: "dd MM yyyy - hh:ii",
        autoclose: true,
        todayBtn: true,
        pickerPosition: "bottom-left"
    });
</script>