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...

can you give html code also? – Paresh Maghodiya Aug 08 '17 at 07:49 — Paresh Maghodiya, Aug 08 '17 at 07:49
@PareshMaghodiya Here is my HTML Code `

` – Haseeb Ibrar Aug 08 '17 at 07:55 — Haseeb Ibrar, Aug 08 '17 at 07:55
You give `clockpicker` class in `div` not in `input` – Paresh Maghodiya Aug 08 '17 at 08:01 — Paresh Maghodiya, Aug 08 '17 at 08:01

Paresh Maghodiya · Accepted Answer · 2017-08-08T08:22:24.180

2

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>

edited Aug 08 '17 at 08:22

answered Aug 08 '17 at 08:02

Paresh Maghodiya

219
2
11

By doing this clockpicker shows on top of element but in bottom also. Can you please create a fiddle for me – Haseeb Ibrar Aug 08 '17 at 08:06
I try to create fiddle but block external jquery blocked so its not work https://jsfiddle.net/cwdaq8b3/1/ – Paresh Maghodiya Aug 08 '17 at 08:21
You can remove `data-type="before"` from html code. check new edited code above – Paresh Maghodiya Aug 08 '17 at 08:23
Can't remove `data-type="before"` because i m using that attribute. That attribute is not linked with clockpicker – Haseeb Ibrar Aug 09 '17 at 06:08

Bootstrap clock picker Auto Adjustment Issue in modal popup

1 Answers1