Question

我对此感到疯狂。我以各种方式更改库顺序，jquery ui和bootstrap js库之间必定存在冲突。我在对话框中添加了fullcalendar，但是当我在日历中选择某一天时，没有显示datetimepicker（$（。modal）.modal（'show'）不起作用）。没有js警告。

<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="css/fullcalendar.css"> 
<link rel="stylesheet" href="css/bootstrap-iso.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/moment.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lib/jquery.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/fullcalendar.min.js'></script>
<script src='http://fullcalendar.io/js/fullcalendar-2.1.1/lang/es.js'></script>
<script src='js/bootstrap.min.js'></script>   
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js'></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
        dialogHorario = $( "#dialogHorario" ).dialog({
            autoOpen: false,
            height: 600,
            width: 600,
            modal: true
        });

        // Evento click para mostrar un dialogo modal para editar el horario
        $( ".editarHorario" ).on( "click", function() {
            // Para evitar que el diálogo se cierre precipitadamente
            event.preventDefault();

            // asignaturaId es el parámetro que hemos pasado a través del link editar
            var asignaturaId = this.id;

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month'
                },
                navLinks: false, // can click day/week names to navigate views
                selectable: true,
                selectHelper: true,
                weekends: false,
                select: function(start, end) {
                    // Display the modal.
                    // You could fill in the start and end fields based on the parameters
                    $('.modal').modal('show');
                },
                eventClick: function(event, element) {
                    // Display the modal and set the values to the event values.
                    $('.modal').modal('show');
                    $('.modal').find('#title').val(event.title);
                    $('.modal').find('#starts-at').val(event.start);
                    $('.modal').find('#ends-at').val(event.end);

                },
                editable: true,
                eventLimit: true // allow "more" link when too many events
            });

            // Bind the dates to datetimepicker.
            // You should pass the options you need
            $("#starts-at, #ends-at").datetimepicker();

            // Whenever the user clicks on the "save" button om the dialog
            $('#save-event').on('click', function() {
                var title = $('#title').val();
                if (title) {
                    var eventData = {
                        title: title,
                        start: $('#starts-at').val(),
                        end: $('#ends-at').val()
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                }
                $('#calendar').fullCalendar('unselect');

                // Clear modal inputs
                $('.modal').find('input').val('');

                // hide modal
                $('.modal').modal('hide');
            });

            // Quitando el foco
            $.ui.dialog.prototype._focusTabbable = function(){};
            dialogHorario.dialog( "open" );
        });
</script>
</head>
<body>
    <div id="dialogHorario" title="Horarios de la asignatura" style="display:none;">
    <div class="bootstrap-iso">
        <div id='calendar'></div>
        <div id='datepicker'></div>
        <div id="hola" class="modal fade" tabindex="-1" >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Programar clase</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-12">
                                <label class="col-xs-4" for="starts-at">Inicio: </label>
                                <input type="text" name="starts_at" id="starts-at" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <label class="col-xs-4" for="ends-at">Fin</label>
                                <input type="text" name="ends_at" id="ends-at" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-primary" id="save-event">Guardar cambios</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</div>
</body>

Bootstrap模态没有显示

0 个答案: