我有一个 .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
?
我制作了一个片段,展示了您的代码完全没问题,也许检查一下您的网络选项卡,如果 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>