Question

尝试使用带有模态的bootstrap日期时间选择器，我可以加载它，看起来很棒，但是当我尝试单击日历图标时，日历没有显示，我已经检查了所有依赖项，文件加载顺序，冲突等..但这里的虚无is is是我的代码

HTML

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-  theme.min.css">
    <link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../css/timesheet.css">
    <link rel="icon" href="../images/calendar.png">
    <title>Time Sheet</title>
</head>

<body background="../images/Art-White-Hours-Wallpaper-HD-197.jpg">
    <div>
        <%@include file="../WEB-INF/jspf/navbarfragment.jspf"%>
            <%@include file="../WEB-INF/jspf/loginmodal.jspf"%>
                <%@include file="../WEB-INF/jspf/edittimemodal.jspf"%>
                    <%@include file="../WEB-INF/jspf/timereport.jspf"%>

    </div>
    <h1 class="titlebacktext">This is a time sheet</h1>
    <div class="titleback"></div>




    <%@include file="../WEB-INF/jspf/footerfragment.jspf"%>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script src="../js/moment.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <script src="../js/bootstrap-datetimepicker.min.js"></script>
        <script src="../js/timesheet.js"></script>
</body>

</html>

javascript文件

$(document).ready(function() {

    /*jQuery(function($){*/

    $(function() {

        $('#datetimepicker6').datetimepicker({
            defaultDate: "7/4/2015"
        });
        $('#datetimepicker7').datetimepicker({
            defaultDate: "7/4/2015"
        });
        $("#datetimepicker6").on("dp.change", function(e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function(e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
    });
});

之前忘记添加此内容，但这里是edittimemodal

<div class="modal fade" id="edittime-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content entertime">
            <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" id="myModalLabel">Please Enter a Start and End Time</h4>
            </div>
            <div class="modal-body">

                <div class='col-md-5'>
                    <div class="form-group">
                        <div class='input-group date' id='datetimepicker6'>
                            <input type='text' class="form-control" /> <span class="input-group-addon"> <span
                        class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class='col-md-5'>
                    <div class="form-group">
                        <div class='input-group date' id='datetimepicker7'>
                            <input type='text' class="form-control" /> <span class="input-group-addon"> <span
                        class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </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">Submit Time</button>
                </div>
            </div>
        </div>
    </div>
</div>

恼人地说我没有错误，任何想法都会非常感激。尝试添加一个onclick但仍然没有，然后我可能只是写了一些错误的东西，提前谢谢。

Answer 1

这个问题的答案真的很奇怪，但是在删除所有内容之后，我只是删除了所有的JS文件并重新导入它们，然后它才起作用......这么奇怪而且非常令人沮丧，但这就是答案。 ...我猜其中一个文件在下载时有错误，因为我是从同一个地方获得的......

Bootstrap日期时间选择器日历未显示

1 个答案: