JQuery DatePicker conflict in Joomla 3 website <p>Sorry, I'm not a programmer and really can't find how to handle this...</p> <p>On a Joomla 3.3.0 website (<a href="http://lantanaweb.com/savoy-sofia/sofia/" rel="nofollow">http://lantanaweb.com/savoy-sofia/sofia/</a>) I added a custom HTML code module (it means adding JS and scripts to Joomla modules) to show a datepicker in a booking form. But the date picker do not show up as it should.</p> <p>Moreover, after adding this module, the full page JQuery slideshow module stopped working.</p> <p>Then I installed the JQuery Easy Plugin to solve JQuery related conflicts, and the slideshow was actually fixed.</p> <p>But I can't still make the datepicker show as it is supposed to do. My joomla custom HTML module code is:</p> <pre><code>&lt;script type="text/javascript" src="js/jquery-1.6.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt; &lt;link type="text/css" href="css/overcast/jquery-ui-1.8.16.custom.css" rel="stylesheet" /&gt; &lt;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]);" &gt; &lt;!-- ###################### --&gt; &lt;!-- PARAMETERS TO CUSTOMIZE --&gt; &lt;input name="gg" id="gg" value="" type="hidden"&gt; &lt;input name="mm" id="mm" value="" type="hidden"&gt; &lt;input name="aa" id="aa" value="" type="hidden"&gt; &lt;input name="id_albergo" value="312" type="hidden"&gt; &lt;input name="lingua_int" value="ita" type="hidden"&gt; &lt;input name="dc" value="710" type="hidden"&gt; &lt;input name="id_stile" value="9456" type="hidden"&gt; &lt;input name="headvar" value="ok" type="hidden"&gt; &lt;input name="graph_be" value="4" type="hidden"&gt; &lt;div id="arrival_date" class="blocco"&gt; &lt;div class="label"&gt;Data di Arrivo&lt;/div&gt; &lt;div class="tendina"&gt; &lt;input id="datepicker" type="text" value="" &gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="nights" class="blocco"&gt; &lt;div class="label"&gt;Notti&lt;/div&gt; &lt;div class="tendina"&gt; &lt;select class="select" name="notti_1" &gt; &lt;option value="1" selected&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;option value="7"&gt;7&lt;/option&gt; &lt;option value="8"&gt;8&lt;/option&gt; &lt;option value="9"&gt;9&lt;/option&gt; &lt;option value="10"&gt;10&lt;/option&gt; &lt;option value="11"&gt;11&lt;/option&gt; &lt;option value="12"&gt;12&lt;/option&gt; &lt;option value="13"&gt;13&lt;/option&gt; &lt;option value="14"&gt;14&lt;/option&gt; &lt;option value="15"&gt;15&lt;/option&gt; &lt;option value="16"&gt;16&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="rooms" class="blocco"&gt; &lt;div class="label"&gt;Camere&lt;/div&gt; &lt;div class="tendina"&gt; &lt;select class="select" name="tot_camere"&gt; &lt;option value="1" selected&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;option value="7"&gt;7&lt;/option&gt; &lt;option value="8"&gt;8&lt;/option&gt; &lt;option value="9"&gt;9&lt;/option&gt; &lt;option value="10"&gt;10&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="adults" class="blocco"&gt; &lt;div class="label"&gt;Adulti&lt;/div&gt; &lt;div class="tendina"&gt; &lt;select class="select" name="tot_adulti"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2" selected="selected"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;option value="7"&gt;7&lt;/option&gt; &lt;option value="8"&gt;8&lt;/option&gt; &lt;option value="9"&gt;9&lt;/option&gt; &lt;option value="10"&gt;10&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="children" class="blocco"&gt; &lt;div class="label"&gt;Bambini&lt;/div&gt; &lt;div class="tendina"&gt; &lt;select class="select" name="tot_bambini" &gt; &lt;option value="0" selected &gt;0&lt;/option&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;option value="7"&gt;7&lt;/option&gt; &lt;option value="8"&gt;8&lt;/option&gt; &lt;option value="9"&gt;9&lt;/option&gt; &lt;option value="10"&gt;10&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="search" class="blocco"&gt; &lt;input id="button" type="submit" value="cerca" /&gt; &lt;/input&gt; &lt;/div&gt; &lt;div id="cancella"&gt;&lt;a href="https://reservations.verticalbooking.com/reservation_hotel.htm?id_albergo=312&amp;dc=710&amp;lingua_int=ita&amp;headvar=ok&amp;id_stile=9456&amp;graph_be=4&amp;cancel=pren"&gt;Annulla/Modifica Prenotazione&lt;/a&gt;&lt;/div&gt; &lt;/form&gt; &lt;script type="text/javascript"&gt; $(document).ready( function() { var now = new Date(); var today = now.getDate() + '/' + (now.getMonth() + 1) + '/' + now.getFullYear(); $('#datepicker').val(today); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(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(); } &lt;/script&gt; </code></pre> <p>Although I read a few posts related on the forum, I really don't know where to start from... Any help would be highly appreciated... Thanks!</p> <p>Edit 1: The error is: </p> <pre><code>$(...).datepicker is not a function related code (line 435) is: $( "#datepicker" ).datepicker({ minDate: "0", showOtherMonths: true, selectOtherMonths: true, altField: "#gg", altFormat: "dd" }); </code></pre>