I have added the jQuery datepicker to one of my visualforce pages, however, after the datepicker appears, I can't interact with it in any way.  Can't change months, can select a date, nothing.  The only thing I can do is click somewhere else to make it go away.  Here's my page code:

<apex:page controller="MarketingReports">
  <apex:includeScript value="{!URLFOR($Resource.jQueryUI, 'js/jquery-1.7.2.min.js')}"/>
  <apex:includeScript value="{!URLFOR($Resource.jQueryUI, 'js/jquery-ui-1.8.22.custom.min.js')}"/>
  <apex:stylesheet value="{!URLFOR($Resource.jQueryUI, 'css/smoothness/jquery-ui-1.8.22.custom.css')}"/>

  <script type="text/javascript">
    var j$ = jQuery.noConflict();
    j$(document).ready(
      function()
      {
        j$('input[id$="fromDate"]').datepicker({ dateFormat: 'dd-mm-yyyy', changeMonth: true,
                                    changeYear: true });
        j$('input[id$="toDate"]').datepicker({ dateFormat: 'dd-mm-yyyy', changeMonth: true,
                                  changeYear: true });
      });
  </script>

  <apex:form >
    <apex:pageBlock title="Marketing Reports">
      <apex:pageMessages >
      </apex:pageMessages>
      <apex:pageBlockButtons >
        <apex:commandButton value="Generate Report" action="{!generateReport}">
        </apex:commandButton>
        </apex:pageBlockButtons>
        <apex:pageBlockSection >
        <apex:outputLabel value="From Date - Inclusive (dd-mm-yyyy)" for="fromDate">
        </apex:outputLabel>
        <apex:inputText id="fromDate">
        </apex:inputText>
        <apex:outputLabel value="To Date - Inclusive (dd-mm-yyyy)" for="toDate">
        </apex:outputLabel>
        <apex:inputText id="toDate">
        </apex:inputText>  
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
</apex:page>

 I quite new to visualforce pages and most of the above code is based on tutorials, etc. so any help anyone can offer would be much appreciated.

Thanks.