$(...).datetimepicker 包含在 .hbs 模板中时不是函数

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

我有一个 .hbs 模板,我需要在其中添加

date-time
选择器小部件。

这是我目前拥有的:

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"
             integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"
             integrity="sha512-+UiyfI4KyV1uypmEqz9cOIJNwye+u+S58/hSwKEAeUMViTTqM9/L4lqu8UxJzhmzGpms8PzFJDzEqXL9niHyjA=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
          <link rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"
             integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw=="
             crossorigin="anonymous" referrerpolicy="no-referrer"/>
       </head>
       <body>
          <input id="date_timepicker_start" type="text" >
          <input id="date_timepicker_end" type="text" >

          <script src="/javascripts/datetime.js"></script>
       </body>

在这个脚本中,

datetime.js
,我有以下行:

$(document).ready(function(){
    $('#date_timepicker_start').datetimepicker({ ... });
});

当我加载页面时,我得到:

jquery.js:3793 Uncaught TypeError: $(...).datetimepicker is not a function
    at HTMLDocument.<anonymous> (datetime.js:2:33)
    at mightThrow (jquery.js:3489:29)
    at process (jquery.js:3557:12)

现在,为什么会这样?

jQuery
肯定加载得很好,例如,我可以使用
alert
来确认它已加载。为什么不是
datetimepicker

jquery datetimepicker hbs
1个回答
0
投票

我制作了一个片段,展示了您的代码完全没问题,也许检查一下您的网络选项卡,如果 datetimepicker.js 确实已加载:

    <!DOCTYPE html>
    <html lang="en">
       <head>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"
             integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"
             integrity="sha512-+UiyfI4KyV1uypmEqz9cOIJNwye+u+S58/hSwKEAeUMViTTqM9/L4lqu8UxJzhmzGpms8PzFJDzEqXL9niHyjA=="
             crossorigin="anonymous" referrerpolicy="no-referrer"></script>
          <link rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"
             integrity="sha512-bYPO5jmStZ9WI2602V2zaivdAnbAhtfzmxnEGh9RwtlI00I9s8ulGe4oBa5XxiC6tCITJH/QG70jswBhbLkxPw=="
             crossorigin="anonymous" referrerpolicy="no-referrer"/>
       </head>
       <body>
          <input id="date_timepicker_start" type="text" >
          <input id="date_timepicker_end" type="text" >

          <script>
          $(document).ready(function(){
             $('#date_timepicker_start').datetimepicker();
             $('#date_timepicker_end').datetimepicker();
          });
          </script>
       </body>

© www.soinside.com 2019 - 2024. All rights reserved.