引导模式对话框中的时间选择器

Question

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!

Answer 1

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'

Answer 2

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!

Answer 3

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

Answer 4

It's a reported bug https://github.com/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'

Answer 5

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.

Answer 6

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;