Bootstrap4 datetime picker: Uncaught TypeError: $(...).pickadate is not a function

Question

我在使用 bootstrap4 的日期选择器上遇到错误。我已经在线阅读了所有关于错误的信息，唯一的解决方案是关于 calling 的安排。我做了同样的事情，我首先调用了 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
    });
});

Answer 1

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

订购

我喜欢 CSS 和 JS 中的这个顺序，它不会在很长一段时间内造成问题

CSS

Bootstrap
MD Bootstrap
字体很棒
您的 CSS 文件

JS

Put your all scripts before body (</body) tag closing.

jQuery
Bootstrap
MD Bootstrap
字体很棒
D3.JS
图表 JS
日期选择器
你的 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>

Bootstrap4 datetime picker: Uncaught TypeError: $(...).pickadate is not a function

Bootstrap4 datetime picker: Uncaught TypeError: $(...).pickadate is not a function

datepicker

bootstrap-datepicker

bootstrap-4

订购