Question

抱歉，我不是程序员，真的找不到如何处理......

在Joomla 3.3.0网站（http://lantanaweb.com/savoy-sofia/sofia/）上，我添加了一个自定义HTML代码模块（这意味着将JS和脚本添加到Joomla模块中）以在预订表单中显示日期选择器。但日期选择器并没有显示出来。

此外，添加此模块后，整页JQuery幻灯片模块停止工作。

然后我安装了JQuery Easy Plugin来解决与JQuery相关的冲突，幻灯片实际上已经修复了。

但我仍然无法按照预期的方式制作日期选择器。我的joomla自定义HTML模块代码是：

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

<form action="https://reservations.verticalbooking.com/reservation_hotel.htm" method="post" name="myform" id="myform" target="_blank" style="margin:0px; padding:0px;" onsubmit="invia_form();_gaq.push(['_linkByPost', this]);" >


                  <!-- ###################### -->
                  <!-- PARAMETERS TO CUSTOMIZE -->
                  <input name="gg" id="gg" value="" type="hidden">
                  <input name="mm" id="mm" value="" type="hidden">
                  <input name="aa" id="aa" value="" type="hidden">
                  <input name="id_albergo" value="312" type="hidden">
                  <input name="lingua_int" value="ita" type="hidden">
                  <input name="dc" value="710" type="hidden">
                  <input name="id_stile" value="9456" type="hidden">
                  <input name="headvar" value="ok" type="hidden">
                  <input name="graph_be" value="4" type="hidden">


<div id="arrival_date" class="blocco">
    <div class="label">Data di Arrivo</div>                
    <div class="tendina">
        <input id="datepicker" type="text" value="" >
    </div>
    </div>
<div id="nights" class="blocco">
    <div class="label">Notti</div>                
    <div class="tendina">
        <select class="select" name="notti_1" >
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
        </select>
    </div>
</div>
<div id="rooms" class="blocco">
    <div class="label">Camere</div>                
    <div class="tendina">
        <select class="select" name="tot_camere">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </div>
</div>
<div id="adults" class="blocco">
    <div class="label">Adulti</div>                
    <div class="tendina">
        <select class="select" name="tot_adulti">
            <option value="1">1</option>
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </div>
</div>
<div id="children" class="blocco">
    <div class="label">Bambini</div>                
    <div class="tendina">
        <select class="select" name="tot_bambini" >
            <option value="0" selected >0</option>      
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
    </div>
</div>

<div id="search" class="blocco">
  <input id="button" type="submit" value="cerca" />
  </input>
</div>
<div id="cancella"><a href="https://reservations.verticalbooking.com/reservation_hotel.htm?id_albergo=312&dc=710&lingua_int=ita&headvar=ok&id_stile=9456&graph_be=4&cancel=pren">Annulla/Modifica Prenotazione</a></div>
</form>
<script type="text/javascript">
$(document).ready( function() {
var now = new Date();
var today = now.getDate() + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
$('#datepicker').val(today);
});

</script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker({ minDate: "0", showOtherMonths: true, selectOtherMonths: true, altField: "#gg",  altFormat: "dd" });
});
function invia_form()
{
var data =  $( "#datepicker" ).attr('value');
//alert(data);

data = data.split('/');

$('#gg').attr({value:data[0]});
$('#mm').attr({value:data[1]});
$('#aa').attr({value:data[2]});

//alert($('#gg').attr('value')+' - '+$('#mm').attr('value')+' - '+$('#aa').attr('value'));
//$('#myform').submit();
}
</script>

虽然我在论坛上阅读了一些相关的帖子，但我真的不知道从哪里开始......任何帮助都会受到高度赞赏...谢谢！

编辑1：错误是：

$(...).datepicker is not a function related code (line 435) is: $( 
"#datepicker" ).datepicker({ minDate: "0", showOtherMonths: true, 
selectOtherMonths: true, altField: "#gg",   altFormat: "dd" });

Answer 1

如果您查看页面中的其他jQuery，则使用别名jQuery而不是$。使用$可能会导致与MooTools或其他JavaScript库发生冲突。

转换代码，例如：

$(function() {
    $( "#datepicker" ).datepicker({ minDate: "0", showOtherMonths: true, selectOtherMonths: true, altField: "#gg",  altFormat: "dd" });
});

到此：

jQuery(function($) {
   $( "#datepicker" ).datepicker({ minDate: "0", showOtherMonths: true, selectOtherMonths: true, altField: "#gg",  altFormat: "dd" });
});

注意函数开头的jQuery别名和括号中的$。不在此包装函数中的任何其他jQuery代码必须使用jQuery，而不是$。你可以把它全部移到里面，没有任何不良影响。

实际上，jQuery Easy extension docs也涵盖了这一点。看看＆＃34;但等等......＆＃34;部分。

Joomla 3网站中的JQuery DatePicker冲突

1 个答案: