Datepicker in wrong position

I am developing an php aplication and I used datepicker javascript. The problem with this is that if I scroll down it does not appear in the right position. It gets really bad if the page gets too long, the date picker is not even visible.

I am using IExplorer, it might be outdated. It is not a solution to update the browser, cause this needs to run on 200+ PCs

<script type="text/javascript" language="javascript">
$(function(){ $("#udate").datepicker({ dateFormat:'yy-mm-dd'}); });
</script>
<input type="text" id="udate" name="udate">

JavaScript
​x
 
<script type="text/javascript" language="javascript">$(function(){ $("#udate").datepicker({ dateFormat:'yy-mm-dd'}); });</script><input type="text" id="udate" name="udate">​

Code as requested by comment

<style type="text/css">
html {
overflow-y: scroll;
}
body {
    size:8;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

JavaScript
 
<style type="text/css">html {overflow-y: scroll;}body {    size:8;}</style><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>​

Answer

Try this work around to adjust position of datepicker after it opens (please adjust position as per your requirement)

<script type="text/javascript" language="javascript">
  $(function(){ 
        $("#udate").datepicker({ dateFormat:'yy-mm-dd'}); 
        // bind click event and adjust datepicker position.
        $(".hasDatepicker").click(function(e){
            $("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});
        });
  });
</script>

<input type="text" id="udate" name="udate">

JavaScript
 
<script type="text/javascript" language="javascript">  $(function(){         $("#udate").datepicker({ dateFormat:'yy-mm-dd'});         // bind click event and adjust datepicker position.        $(".hasDatepicker").click(function(e){            $("#ui-datepicker-div").css({'top':e.pageY+20,'left':e.pageX-250});        });  });</script>​<input type="text" id="udate" name="udate">​

Advertisement

Answer