Javascript 使用 timepicker.js 时“timepicker 不是函数”?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29631402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:41:39  来源:igfitidea点击:

'timepicker is not a function' when using timepicker.js?

javascriptjquery

提问by sunny

I'm trying to put a timepicker into a form using this plugin: http://jonthornton.github.io/jquery-timepicker/. It seemed like all I had to do was download the library and use jQuery and jQuery ui, but so far I cannot get this to work even though the datepicker from jQuery works great.

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

Here's my code:

这是我的代码:

                <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" >
...

I get the following error when I run this in firefox:

在 Firefox 中运行时出现以下错误:

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

I have also tried not embedding the js call to timepicker in a lambda function. I have also tried attaching the timepicker id to a div element. Neither of these options works. I have seen in other SO posts that this error is usually when there is a naming conflict, but I don't have anything named 'timepicker' in my code apart from the include of the timepicker.css and timepicker.js files.

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

I'd appreciate any suggestions for troubleshooting this. Thanks!

对于解决此问题的任何建议,我将不胜感激。谢谢!

回答by epascarello

The code works with the jQuery and jQuery ui versions you have. I updated your code to use a hardcoded path and the code runs.

该代码适用于您拥有的 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>

It means that the JavaScript file is not where you have it looking. The console probably has a message that says: "Failed to load resource: the server responded with a status of 404 (Not Found)"

这意味着 JavaScript 文件不是您要查找的位置。控制台可能有一条消息说:“加载资源失败:服务器响应状态为 404(未找到)

If the file is there, than check to make sure that the JS file actually has content in it.

如果文件在那里,那么检查以确保 JS 文件中确实有内容。

回答by Govind Rai

I ran into the same issue. Call it amateurish, but the issue was resolved by adding bothJQueryandJQuery UIplugins to my code in additionto the the CSS and JS file custom to Timepicker.co.

我遇到了同样的问题。说它是业余的,但这个问题被解决的同时添加的JQueryJQuery的UI插件我的代码中除了对CSS和JS文件习俗Timepicker.co。

Timepicker's site states:

Timepicker 的网站指出:

To use jQuery Timepicker you'll need to include two files: jquery.timepicker.min.js and jquery.timepicker.min.css. Then, assuming you have an element in your document, with class timepicker, you can use the code on the right (or the code below, if you are reading on mobile) to initialize the plugin.

要使用 jQuery Timepicker,您需要包含两个文件:jquery.timepicker.min.js 和 jquery.timepicker.min.css。然后,假设您的文档中有一个元素,使用类 timepicker,您可以使用右侧的代码(或下面的代码,如果您在移动设备上阅读)来初始化插件。

They miss the part about having JQuery and JQuery UI in your code as well (probably due to obviousness for most coders. Regardless, I've submitted a request to change the wording on the website so beginners (like me) don't experience frustration over this silly mistake.

他们也错过了在您的代码中包含 JQuery 和 JQuery UI 的部分(可能是由于对大多数编码人员来说是显而易见的。无论如何,我已经提交了更改网站上的措辞的请求,因此初学者(像我一样)不会感到沮丧在这个愚蠢的错误。