Bootstrap4 datetime picker：Uncaught TypeError：$（...）。pickadate不是一个函数

问题描述 投票：0回答：1

我在使用bootstrap4的日期选择器上遇到错误。我已经在线阅读了有关该错误的所有信息，唯一不断出现的解决方案是有关调用s的安排。我首先执行了与我首先调用Jquery相同的操作，但是错误仍然存​​在。下面是我的HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing/Experiment</title>

    <link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="src/MDBv4.16.0/css/mdb.min.css">

    <script src="src/jquery.js"></script>
    <script src="src/bootstrap/js/bootstrap.min.js"></script>
    <script src="src/d3.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
        integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
        crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
        integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
        crossorigin="anonymous"></script>

</head>

<body>
    <div class="wrapper">
        <!-- Sidebar -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <img src="rsc/mblogo.png" alt="" width="50" height="50">
            </div>
            <ul class="list-unstyled components">
                <li class="active">
                    <a href="/">CAM DASHBOARD</a>
                </li>
            </ul>
            <!--End of nav.sidebar-->
        </nav>

        <!--Page content-->
        <div id="content">
            <!-- navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <button type="button" id="sidebarCollapse" class="btn btn-info">
                        <i class="fas fa-align-justify"></i>
                    </button>
                </div>
            </nav>

            <div class="container content-header">
                <div class="row">
                    <input placeholder="Selected date" type="text" id="date-picker-example"
                        class="form-control datepicker">
                </div>
            </div>


            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card shadow mb-5">
                            <h5 class="card-header">
                                Bar Chart
                            </h5>
                            <div class="card-body">
                                <div id="bar-chart">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End of div.row-->

                <div class="row">
                    <div class="col-md-4">
                        <div class="card shadow mb-4">
                            <h5 class="card-header">
                                Top 5 Reason for downtime
                            </h5>
                            <div class="card-body">
                                <ul id="top5Downtime">

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card shadow mb-4">
                            <h5 class="card-header">
                                Pie Chart
                            </h5>
                            <div class="card-body">
                                <div id="pieChart">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End of div.row-->
            </div>


        </div>
        <!--End of div.content-->

    </div>
    <!--End of div.wrapper-->
    <script src = "js/datePicker.js"></script>
    <script src="js/script.js"></script>
    <script src="js/pieChart.js"></script>
    <script src="js/sidebarScript.js"></script>

    <script src = "src/MDBv4.16.0/js/mdb.min.js"></script>
</body>

</html>

这是我的datePicker.js：

//数据选择器初始化

$(document).ready(() => {
    $('.datepicker').pickadate({
        weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        showMonthsShort: true
    });
});
bootstrap-4 datepicker bootstrap-datepicker
1个回答
0
投票

不是pickdate，它的datepicker和这里的顺序很重要，所以要小心。

ORDER

我喜欢CSS和JS中的此顺序，并且不会长时间出现问题

CSS

  1. Bootstrap

  2. MD Bootstrap

  3. 字体很棒

  4. 您的CSS文件

JS

在body (</body)标记关闭之前放置所有脚本。

  1. jQuery

  2. Bootstrap

  3. MD Bootstrap

  4. 字体很棒

  5. D3.JS

  6. 图表JS

  7. Datepicker

  8. 您的JS文件

<!-- <link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="css/style.css"> -->
<!-- <link rel="stylesheet" href="src/MDBv4.16.0/css/mdb.min.css"> -->

<!-- <script src="src/jquery.js"></script> -->
<!-- <script src="src/bootstrap/js/bootstrap.min.js"></script> -->
<!-- <script src="src/d3.min.js"></script> -->
<!-- <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"
integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ"
crossorigin="anonymous"></script> -->
<!-- <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"
integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY"
crossorigin="anonymous"></script> -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">

<div class="wrapper">
    <!-- Sidebar -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <img src="rsc/mblogo.png" alt="" width="50" height="50">
        </div>
        <ul class="list-unstyled components">
            <li class="active">
                <a href="/">CAM DASHBOARD</a>
            </li>
        </ul>
        <!--End of nav.sidebar-->
    </nav>

    <!--Page content-->
    <div id="content">
        <!-- navbar -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <button type="button" id="sidebarCollapse" class="btn btn-info">
                    <i class="fas fa-align-justify"></i>
                </button>
            </div>
        </nav>

        <div class="container content-header">
            <div class="row">
                <input placeholder="Selected date" type="text" id="date-picker-example"
                class="form-control datepicker">
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card shadow mb-5">
                        <h5 class="card-header">
                            Bar Chart
                        </h5>
                        <div class="card-body">
                            <div id="bar-chart">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End of div.row-->
            <div class="row">
                <div class="col-md-4">
                    <div class="card shadow mb-4">
                        <h5 class="card-header">
                            Top 5 Reason for downtime
                        </h5>
                        <div class="card-body">
                            <ul id="top5Downtime">

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card shadow mb-4">
                        <h5 class="card-header">
                            Pie Chart
                        </h5>
                        <div class="card-body">
                            <div id="pieChart">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End of div.row-->
        </div>
    </div>
    <!--End of div.content-->
</div>

<!--End of div.wrapper-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<!-- <script src = "js/datePicker.js"></script> -->
<!-- <script src="js/script.js"></script> -->
<!-- <script src="js/pieChart.js"></script> -->
<!-- <script src="js/sidebarScript.js"></script> -->
<!-- <script src = "src/MDBv4.16.0/js/mdb.min.js"></script> -->
<script>
    $(document).ready(() => {
        $('.datepicker').datepicker({
            weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            showMonthsShort: true
        });
    });
</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.