Question

我试图让jquery插件timpickr和multidatespicker在同一页面上工作。不幸的是，我遇到了让他们一起工作的问题。他们都在这里：

http://code.google.com/p/jquery-utils/wiki/UiTimepickr

http://multidatespickr.sourceforge.net/

这是我目前的代码：

测试

<link type="text/css" href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-v1.4.4.js"></script>

<!-- Start Timepickr -->
    <link rel="Stylesheet" media="screen" href="css/ui.timepickr.css" />
    <script type="text/javascript" src="js/jquery.timepickr.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){ 
            $('#inTime').timepickr({convention: 12}); 
            $('#outTime').timepickr({convention: 12}); 
        }); 
    </script>
<!-- END Timepickr-->

<!-- POPUP CALENDAR --> 
    <!--<script type="text/javascript" src="js/jquery-v1.4.4.js"></script>-->
    <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.multidatespicker.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#date').multiDatesPicker({numberOfMonths: 2});
        });
    </script>
<!-- END POPUP CALENDAR-->

    Date:  <input type="text" name="date" id="date">    
    <br>
    Time In:  <input type="text" name="inTime" id="inTime">
    <br>
    Time Out:  <input type="text" name="outTime" id="outTime">

目前timepickr有效。如果你添加“script type =”text / javascript“src =”js / jquery-v1.4.4.js“”就在“！ - Popup Calendar--”开始之后，日历会起作用但是timepickr不会。有没有人对我做错了什么有任何建议？

谢谢！布兰登

Answer 1

把：

<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

直接位于第一个

之下

<script type="text/javascript" src="js/jquery-v1.4.4.js"></script>

同时删除第二个jquery ui css。

Answer 2

您应该将所有JS文件引用放在html页面的头部以供初学者使用。如果仅仅是为了可读性，因为您目前将doc ready语句与文件引用混合在一起。

jquery.js
的jquery-ui.js
other.js
doc ready statement

Answer 3

好吧，我一直在认真看看插件，我知道你的问题是什么。您缺少插件工作所需的几个脚本。这是一个解决方案，两个插件都可以工作，我自己测试了。你可以在源标签中看到我从哪里获得模块，它们实际上附带了插件包。

<!-- Stylesheets -->
<link rel="Stylesheet" media="screen" href="/ui-timepickr/dist/themes/default/ui.core.css" />
<link rel="Stylesheet" media="screen" href="/ui-timepickr/dist/themes/default/ui.timepickr.css" />
<link rel="stylesheet" type="text/css" href="/multidates/css/mdp.css">

<!-- latest JQuery module -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<!-- JQuery UI -->
<script type="text/javascript" src="/multidates/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="/multidates/js/jquery.ui.datepicker.js"></script>
<!-- Spanish dates -->
<script type="text/javascript" src="/multidates/js/jquery.ui.datepicker-es.js"></script>

<!-- timepickr -->
<script type="text/javascript" src="/ui-timepickr/page/jquery.ui.all.js"></script>
<script type="text/javascript" src="/ui-timepickr/page/jquery.utils.js"></script>
<script type="text/javascript" src="/ui-timepickr/page/jquery.strings.js"></script>
<script type="text/javascript" src="/ui-timepickr/page/jquery.anchorHandler.js"></script>
<script type="text/javascript" src="/ui-timepickr/src/ui.dropslide.js"></script>
<script type="text/javascript" src="/ui-timepickr/src/ui.timepickr.js"></script>

<!-- datepicker -->
<script type="text/javascript" src="/multidates/jquery-ui.multidatespicker.js"></script>

<!-- execution code -->
<script type="text/javascript">
        $(document).ready(function(){
            //timepickr
            $('#inTime').timepickr();
            $('#outTime').timepickr();

            //popup calendar
            $('#date').multiDatesPicker();
        });
</script>

Date:  <input type="text" name="date" id="date">    
<br>
Time In:  <input type="text" name="inTime" id="inTime">
<br>
Time Out:  <input type="text" name="outTime" id="outTime">

我希望能为你解决这个问题。为了使它更容易，将所有必要的模块放在同一目录下，这样你就不会意外地添加相同脚本的副本，IE，一个目录用于与JQuery有关的所有内容，另一个目录用于插件。要了解有关插件的更多信息，建议您阅读他们的文档。

多个JQuery插件无法正常运行

3 个答案: