jquery date picker

[newcf]

<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="scripts/jquery-1.8.3.js"></script>
<script src="scripts/jquery-ui.js"></script>

<script>
    $(function() {

       $("#datepicker").datepicker({ minDate: 0 });

    });

</script>

this loop returned records from table.  Supposed it returned 5 records.  The code below only show the calendar for first text box.  how can I display every calendar all of tex boxese
<cfloop query="q_sale_order">
<cfinput type="text" value="#dateformat(sale_date, 'mm-dd-yy')#"  id="datepicker" name="sale_date#id#"  />
</cfloop>

Thanks

[Dan_Bracuk · Accepted solution]

Put the calendar inside your loop.  Also, append the id value from your query to the id attribute of your cfinput tag.

[newcf]

worked, thanks alot.

[newcf]

Hi,

Like i said from very first posted, it is dynamic display from the table.  The pop up calendar appears on the right side of text box if i have about 10 or 15 records(rows) on the page .  But if more records such as 50 or 100 records (rows) then when i scroll dow or half way down and click on text box, no pop up calendar appeas on the right side of text box.

How can i make this pop up calendar dispay beside the text box regarless for how many records i have on the page?

here what i have now. 

<script>

     $(function() {   

     $( "##datepicker_#id#" ).datepicker({   

    minDate:0,

    minYear:0,

      changeMonth: true,     

      changeYear: true ,

    beforeShow: function(input, inst)

    {

        inst.dpDiv.css({marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px'});

    }

      });

     });

     </script>

thanks

[Dan_Bracuk]

That's odd.

I suggest using Firebug to see what's happening on the javascript side.

[newcf]

it worked fine on FF but not on IE, found something from this link: http://stackoverflow.com/questions/2193169/jquery-ui-datepicker-ie-reload-or-jumps-to-the-top-of-the... but don't kow how to incoporate it into my current code, does any know?

tried this but still didn't work when i scroll the page all the way down, don't see the pop up calendar.   The bottom line is j query pop up calendar appreas in wrong positon i get a lowwer on the page since it always display on the top.

   <script>

     $(function() {   

     $( "##datepicker_#id#" ).datepicker({   

    minDate:0,

    minYear:0,

     changeMonth: true,     

     changeYear: true ,   

    numberOfMonths: 2,

     showButtonPanel: true,

   onSelect: function() {$(".ui-datepicker a").removeAttr("href");}

      });

     });

     </script>

thanks