javascript - 使用 timepicker.js 时“timepicker 不是函数”？

Question

我正在尝试使用此插件将时间选择器放入表单中:http://jonthornton.github.io/jquery-timepicker/ .似乎我所要做的就是下载库并使用 jQuery 和 jQuery ui，但到目前为止我无法让它工作，即使来自 jQuery 的日期选择器工作得很好。

这是我的代码:

                <link rel="stylesheet" href="/jquery-ui.css">
                <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
                <link rel="stylesheet" href="js/timepicker.css">
                <script src="//code.jquery.com/jquery-1.10.2.js"></script>
                <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
                <script src="js/timepicker.js"></script>


               <script>
                 $(function() {
                     $( "#datepicker" ).datepicker();    
                 });

                 $(function() {
$('#timepicker1').timepicker();
                 });
                </script>

              <form method="post" action = "makecleaningappt">
                    What day would you like a cleaning?
                    <input type="text" id="datepicker" name = "date">

                 What time would you like to start?<br>(example format: 3 pm)
                    <input type="text" id="timepicker1" name = "time" >
...

当我在 firefox 中运行时出现以下错误:

TypeError: $(...).timepicker is not a function

我也尝试过不在 lambda 函数中嵌入对 timepicker 的 js 调用。我还尝试将 timepicker id 附加到 div 元素。这些选项都不起作用。我在其他 SO 帖子中看到，这个错误通常是在存在命名冲突时出现的，但是除了包含 timepicker.css 和 timepicker.js 文件之外，我的代码中没有任何名为“timepicker”的东西。

如果有任何解决此问题的建议，我将不胜感激。谢谢!

Answer 1

该代码适用于您拥有的 jQuery 和 jQuery ui 版本。我更新了您的代码以使用硬编码路径并且代码运行了。

 $(function() {
   $("#datepicker").datepicker();
 });

 $(function() {
   $('#timepicker1').timepicker();
 });

<link rel="stylesheet" href="/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

<!-- Updated stylesheet url -->
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<!-- Updated JavaScript url -->
<script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>


<form method="post" action="makecleaningappt">
  What day would you like a cleaning?
  <input type="text" id="datepicker" name="date">What time would you like to start?
  <br>(example format: 3 pm)
  <input type="text" id="timepicker1" name="time">
</form>

这意味着 JavaScript 文件不在您要查找的位置。控制台可能会显示一条消息:“无法加载资源:服务器响应状态为 404(未找到)”

如果文件存在，则检查以确保 JS 文件中确实包含内容。