I am trying to implement a time-picker in a boostrap modal dialog. However when I open the dialog the time-picker still looks like a normal text field which makes me believe that this jquery code is not running:

$('#timepicker1').timepicker();  // shown below

However I am able to get the time-picker to display using very similar code on a normal webpage. The problem seems specific to displaying it in a modal dialog.

Here is a link to the time-picker that I am using:

/

Here is my modal dialog:

<div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">close</button>
                <h4 class="modal-title" id="myModalLabel">New Event</h4>
            </div>
            <div class="modal-body">
                <div class="input-append bootstrap-timepicker">
                    <input id="timepicker1" type="text" class="input-small">
                    <span class="add-on"><i class="icon-time"></i></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Here is my script that is suppose to initialize the time-picker

$( document ).ready(function() {
    //$('#table').editableTableWidget();

    $( "#btn-new-event" ).click(function() {
        $('#dialog').modal('show');
        $('#timepicker1').timepicker();  // not running properly
    });

});

Any help would be greatly appreciated!

I am trying to implement a time-picker in a boostrap modal dialog. However when I open the dialog the time-picker still looks like a normal text field which makes me believe that this jquery code is not running:

$('#timepicker1').timepicker();  // shown below

However I am able to get the time-picker to display using very similar code on a normal webpage. The problem seems specific to displaying it in a modal dialog.

Here is a link to the time-picker that I am using:

http://jdewit.github.io/bootstrap-timepicker/

Here is my modal dialog:

<div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">close</button>
                <h4 class="modal-title" id="myModalLabel">New Event</h4>
            </div>
            <div class="modal-body">
                <div class="input-append bootstrap-timepicker">
                    <input id="timepicker1" type="text" class="input-small">
                    <span class="add-on"><i class="icon-time"></i></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Here is my script that is suppose to initialize the time-picker

$( document ).ready(function() {
    //$('#table').editableTableWidget();

    $( "#btn-new-event" ).click(function() {
        $('#dialog').modal('show');
        $('#timepicker1').timepicker();  // not running properly
    });

});

Any help would be greatly appreciated!

• javascript
• jquery
• html
• twitter-bootstrap

• 1 There are two things you can try: 1. move timepicker code to before the modal show code. 2. move the timepicker code out of the click event code. Test and see how it goes. – Bhaskar Shrestha Commented Sep 24, 2014 at 0:27
• 1 Where's your HTML? Did you wrap it in a parent <div class="bootstrap-timepicker">? – DevlshOne Commented Sep 24, 2014 at 0:30
• agree with both ments, it is hard to tell just from js. You also must have in mind that arrangement of links to bootstrap.js and timepicker.js is important – DaniKR Commented Sep 24, 2014 at 6:22
• Sorry I thought I posted my html but it seems like I didn't. – edbert Commented Sep 24, 2014 at 13:57
• I will update the question – edbert Commented Sep 24, 2014 at 13:57

6 Answers 6

For me, I had to do this to make it work:

.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 99999!important;
}

and of course, remove:

template: 'modal'

ibrahimyilmaz gave you the right answer, exactly as shown on the bootstrap timepicker official site.

The only thing that maybe serves as a more precise indication here is that timepicker only works with bootstrap v2.x.

If you want to use bootstrap 3.x, you have to read the migration doc and perform the required changes. If you need help on that, just give me a sign :) Or use timepicker bootstrap3 wich is a fork of the one you have used.

Check this link example to see a working example. Check on the +view Source link to see all the required scripts and links.

Hope it's useful!

$('#timepicker1').timepicker({
    template: 'modal'
});

It's a reported bug https://github./jdewit/bootstrap-timepicker/issues/326

you have to change the z-order as mentioned by @eugene1832:

.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 1050!important;
}

AND you also need to remove the initialization option:

template: 'modal'

To update the answers to this question: bootstrap-timepicker now supports Bootstrap 3, but this issue with modals is a known bug.

The bug is still open at this time, but one user suggested adding this piece of code to your css file to make the timepicker visible:

.bootstrap-timepicker-widget.dropdown-menu {
    z-index: 1050!important;
}

I would note that this solution did not work for me, but it is currently listed as a possible solution. I'll try to update this response when the issue is either resolved on Github or when someone suggests another method.

Add this code for line #666 in bootstrap-timepicker.js file. It's work for me

      var index_highest = 0;
      $(".modal").each(function() {
            // always use a radix when using parseInt
            var index_current = parseInt($(this).css("zIndex"), 10);
            if (index_current > index_highest) {
                index_highest = index_current;
            }
        });     
      var zIndex = parseInt(this.$element.parents().filter(function() { return $(this).css('z-index') !== 'auto'; }).first().css('z-index'), 10) + index_highest;