jQuery UI datepicker issues

I am trying to display a basic jQuery datepicker in my application. When a user clicks the input field, a calendar will show up. My input field is on the bottom of the window, when the calendar pops up. It shows fine in Firefox and Chrome (above the input field) but not in IE (pops up below the input field and the calender is cut off by the bottom of IE). I was wondering if someone here can help me with it. Thanks a lot!

Sample

alt text http://www.parkerandassociates.org/jquery.JPG

My jQuery:

$("#addMatch").live('click', function(){

 $(this).closest('tr').before("<//input field #datepicker
"<tr><td>Date: <input type='text' id='datepicker' size='6' name='date'></td>"+ 
"<td colspan='3'>Time: <select><option>13:00</option>"+
          "<option>18:00</option>"+
          "<option>19:00</option>"+
          "<option>20:00</option>"+
          "</select></td>"+
          "</tr>");

 $("#datepicker").datepicker({ changeMont开发者_运维百科h: true, changeYear: true, yearRange: '2010:2020'});

 return false;
});

Maybe you should try fixing it with the .offset() function.

And scroll the page some pixels down, so you would be sure all the calendar is being shown.

Check out the example found on this website

<div id="scrollToHere">
Scroll to here
</div>

You need something to run your script. Create a button like this:

<input type="button" onclick="scollWin();" value="Scroll up" />

The jQuery Code will be like this:

function scrollWin(){
    $('html,body').animate({
        scrollTop: $("#scrollToHere").offset().top
    }, 2000);
}