time-picker in bootstrap modal dialog

edbert

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!

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

Disable time in bootstrap date time picker

From Dev

Twitter Bootstrap - Center Modal Dialog

From Dev

re-size the modal dialog in bootstrap dynamically

From Dev

Validation in bootstrap modal dialog

From Dev

Bootstrap modal-dialog is not getting display

From Dev

Minimize or collapse a bootstrap 2.3.2 modal dialog?

From Dev

href in modal dialog in bootstrap

From Dev

Using Bootstrap Clockpicker in modal dialog

From Dev

Bootstrap modal dialog center image in body

From Dev

Displaying a bootstrap Modal dialog from Angular Controller

From Dev

Jquery close bootstrap modal dialog completedly

From Dev

Default button in bootstrap modal dialog

From Dev

Not able to access bootstrap modal dialog in Selenium Webdriver

From Dev

Unit testing React Bootstrap modal dialog

From Dev

Setting a countdown timer with time picker dialog android

From Dev

PDF file to be displayed on the dialog modal via bootstrap

From Dev

re-size the modal dialog in bootstrap dynamically

From Dev

Dialog on time picker

From Dev

bootstrap date and time picker not working on bootstrap-modal?

From Dev

bootstrap modal box open jquery location picker

From Dev

How to show a modal dialog using bootstrap

From Dev

time-picker in bootstrap modal dialog

From Dev

Bootstrap modal-dialog is not getting display

From Dev

Image opens modal dialog bootstrap

From Dev

Bootstrap datetime picker in Modal mode not appearing

From Dev

How to set time from time picker dialog?

From Dev

time picker dialog not working

From Dev

Bootstrap date time picker not working

From Dev

How to make time picker dialog for timer