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!
$('#timepicker1').timepicker({
template: 'modal'
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments