Question

I have this program and i want to add a jquery datepicker on it, but for some reason (maybe its how i put in order the library), it won’t show. I created a sample .html file that would only display a datepicker and it shows the datepicker. Here’s the code of my .html file (that shows the datepicker):

  <link rel="stylesheet" type="text/css" media="screen, projection" href="css/dynamicMenuTabStyle.css"/>
  <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.custom.css" /> 
  <link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.7.custom.css"/>  


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

  <script type="text/javascript" src="datepicker.js"></script>

datepicker.js code:

    $(function() {
        $( "#date" ).datepicker();
    });

And this is my other .html which i wanted to insert my datepicker, (but unfortunately, it won’t show):

  <link rel="stylesheet" type="text/css" media="screen, projection" href="css/dynamicMenuTabStyle.css"/>
  <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.custom.css" /> 
  <link rel="stylesheet" type="text/css" href="css/redmond/jquery-ui-1.8.7.custom.css"/>

  <script type="text/javascript" src="js/json2.js"></script>
  <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
  <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>     
        <!--this is for my jqgrid-->
  <script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
  <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
  <script type="text/javascript" src="js/jquery.jqGrid.fluid.js"></script>
        <!--this is for my other .js files-->
  <script type="text/javascript" src="js/jquery.cookie.js"></script>
  <script type="text/javascript" src="globalFunc.js"></script>  
  <script type="text/javascript" src="tallySheet.js"></script>      
  <script type="text/javascript" src="mainindex.js"></script>
  <script type="text/javascript" src="prime-settings.js"></script>
        <!--this is for my closable tabs-->
  <script type="text/javascript" src="js/jquery-ui-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.7.2.js"></script>  
  <script type="text/javascript" src="js/ui.tabs.closable.min.js"></script>

Please, anybody here know where should i insert the code to display the datepicker? Please help.

Edit:

here’s my input date inside the body tag (this code is in the two .html file):

 date: <input type = "text" id = "date" value= "[select date]" color = "gray">

Answer 1

Without the complete HTML file it will be difficult to say, but try this:

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
    <!--this is for my jqgrid-->
<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.fluid.js"></script>
    <!--this is for my other .js files-->
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="globalFunc.js"></script>  
<script type="text/javascript" src="tallySheet.js"></script>      
<script type="text/javascript" src="mainindex.js"></script>
<script type="text/javascript" src="prime-settings.js"></script>
    <!--this is for my closable tabs-->
<script type="text/javascript" src="js/ui.tabs.closable.min.js"></script>

You are loading 2 versions of jquery and 3 versions of jquery.ui. Put jQuery first followed by jQuery.ui. If that doesn’t solve the problem, can you post the complete html file?