Uncaught TypeError: jQuery(...).datetimepicker is not a function

Question

我有一个代码可以生成一个正常的日期时间选择器，但它向我抛出这个错误 Uncaught TypeError: jQuery(...).datetimepicker is not a function

谁能帮帮我，我猜是因为链接的安排和 bootstrap ，但我没有清楚地了解它。

下面是我的代码

<html>
    <head>
     <link rel="stylesheet" href="jquery.datetimepicker.css">
    <script src="jquery-1.8.2.min.js"></script>
    <!-- <script src="jquery-ui.js"></script> -->
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script src="jquery.datetimepicker.js"></script>
    <script src="jquery.validate.min.js"></script>
    <link rel="stylesheet" href="fonts/icomoon/style.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">


    <script>
        $(document).ready(function() {
            jQuery('#datevalue').datetimepicker();
            jQuery('#completed').datetimepicker();
        });
    </script>
    </head>

    <body>
        <form action="#" method="post">
            <div id="AlignMainDiv">
                <div class="form-group last mb-4">
                    <label for="date">Date</label>
                    <input type="text" class="form-control" id="datevalue">
                  </div>
                  <div class="form-group last mb-4">
                    <label for="username">Completed Date and Time</label>
                    <input type="text" class="form-control" id="completed">
                  </div>
            </div>
        </form>
    </body>
</html>

Answer 1

按 F11，打开 Chrome 调试，转到网络 > JS 选项卡并检查是否有任何包含的 js 库 return 处于 404 状态。也许您拼错了脚本名称或 URL 路径。

您也可以尝试直接从 CDN 包含库：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $('#datevalue').datetimepicker();
    $('#completed').datetimepicker();
  } );
  </script>
</head>

Answer 2

我不知道你的 datetimepicker 库是否正在加载。

您可以使用以下CDN。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>

以下代码将加载今天的日期并在输入点击时显示日期选择器

<script>

    $(document).on("click", "#datevalue" , function() {

        $(this).datetimepicker({
            timepicker:false, format:"d-m-Y","setDate": new Date(),
        }).focus();

    });

</script>

Uncaught TypeError: jQuery(...).datetimepicker is not a function

Uncaught TypeError: jQuery(...).datetimepicker is not a function

javascript

jquery

datetimepicker