jQuery timepicker在模式内部不起作用

Question

I am trying to implement a jquery timepicker inside a modal,but it is not working .But the strange is that when i am using it single then it is working fine.Here is the code i am using for the timepicker along with the modal.

   $(document).ready(function() {


   $('.timepicker').timepicker();


   $('#calendar').fullCalendar({
          theme : true,
          header : {
                 left : 'prev,next today',
                 center : 'title',
                 right : 'month,agendaWeek,agendaDay'
          },
          defaultView : 'month',
          editable : true,
          events : {
                 url : '/fullcalendar/events', // set correct url
          },
          select : function(start, end, jsEvent, view) {

                 // set values in inputs
                 $('#event-modal').find('input[name=evtStart]').timepicker({timeFormat:'h:i A'});
                 //$('#event-modal').find('input[name=evtStart]').val(start.format('YYYY-MM-DD HH:mm:ss'));
                 //$('#event-modal').find('input[name=evtEnd]').val(end.format('YYYY-MM-DD HH:mm:ss'));

                 // show modal dialog
                 $('#event-modal').modal('show');           
          },
          selectHelper : true,
          selectable : true,
          snapDuration : '00:10:00'
   });

});


 <div id='calendar'></div>
  <div class="modal fade" id="event-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header-avaliability">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Enter your availability</h4>
        </div>
<div class="modal-body">
            <form name="save-event" method="post">
                <div class="form-group">
                    <select id="JobListQualQns" name="JobListQualQns">
                                            <option value="Phone Interview">Phone Interview</option>
                                            <option value="Interview on site">Interview on site</option>                                          
                                     </select>
                </div>
                <div class="form-group">
                    <label><b>From</b></label>
                     <input type="text" id="lulu" name="evtStart" class="form-control col-xs-3" /> 

                </div>
                <div class="form-group">
                    <label><b>To</b></label>
                    <input type="text" name="evtEnd" class="form-control col-xs-3" />
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" onclick="saveAvaliability()">Save changes</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

It is not working inside the modal but outside somebody please help

Answer 1

You can use bootstrap-timepicker instead. And edit this part on its css :

.bootstrap-timepicker-widget.dropdown-menu.open {
    display: inline-block;
    z-index: 10000;
}

Or if you insist to use jquery timepicker, you can refer to this: Bootstrap Timepicker not displaying , in its answer.