Timepicker not working with bootstrap modal.

[InsaneSkull]

When using with modal and both date and time mode is enabled timepicker doesn't opening. I am working with Mozila Firefox.

[atiquereza]

Dropdown not working with year, month and hour and min

[joaogac]

It's been more than 6 months and no workaround / bug fix has been done.

It seems this project is thrown away.... Sadly to say that.

[trentrichardson]

@joaogac

Sorry guys I don't use bootstrap modal. I try to review pull requests in a timely fashion but to be honest working a full time and at night I don't have a ton of time to explore every issue and provide a fix. I do rely on others to contribute when they can. I wish there were a group of reliable team members for this project as it would greatly improve it, but there isn't. If anyone is interested and could point me to some of their previous work I would be open to others joining this project. (I may write up an official invitation to this)

Have a look at the dev branch as there are several fixes there since the last release, however I don't believe this particular issue has been resolved. If you are able to pinpoint the issue and send a pull request I will be happy to review it.

[mariashahid]

For anyone still struggling with this issue. I came across similar problem with both jquery ui datepicker and trentrichardson timepicker. I found the following solution on stackoverflow to fix the problem and applies to both jquery ui datepicker and trentrichardson timepicker.

        var $confModal = $("#modal");
        var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus;
        $.fn.modal.Constructor.prototype.enforceFocus = function () { };
        $confModal.on('hidden', function () {
            $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn;
        });

[memojuass]

After initializate your timepicker [ $('#timepicker1').timepicker(); ], add these lines, to adjust template into modal popUp
$('#timepicker1').timepicker({
template: 'modal'
});

[alimranahmed]

Thanks @mariashahid, it works for me.

[AragornMx]

After a few investigation i found a solition that works fine, you just have to add a CSS style in your page, add this

.ui-timepicker-container {z-index: 9999999 !important}