Question

我正在尝试在模态中实现一个jquery timepicker，但它不起作用。但奇怪的是，当我单独使用它时，它工作正常。这是我用于timepicker的代码以及模态。

   $(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 -->

它不是在模态内部工作但在外面有人请帮助

Answer 1

您可以改用 bootstrap-timepicker 。并在 css ：

上编辑此部分

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

或者如果你坚持使用jquery timepicker，你可以在答案中参考：Bootstrap Timepicker not displaying。

jQuery timepicker在一个模态中不起作用

1 个答案: