Bootstrap clock picker Auto Adjustment Issue in modal popup

Question

I am using bootstrap clockpicker(http://weareoutman.github.io/clockpicker/). I am not able to auto adjust clockpicker position.

Here is the code for clockpicker:

$('.clockpicker').clockpicker({
        placement: 'bottom',
        align: 'left',
        autoclose: true,
        donetext: 'Done',
        //twelvehour: true,
});

My client like this plugin very much and he want me to use this in his application. But i didn't found any solution to auto adjust clockpicker. Anyone have idea? I'll be very thankfull...

Answer 1

You can try this

<div class="input-group clockpicker"> 
    <input type="text" readonly="" class="form-control" id="from_time" name="from_time" value="10:00"> 
    <span class="input-group-addon clock_icon">
        <span class="glyphicon glyphicon-time"></span>
    </span> 
</div>

<script type="text/javascript">
$('.clockpicker').clockpicker({
    placement: 'bottom',
    align: 'left',
    autoclose: true,
    donetext: 'Done',
});
</script>