I am trying to get the calender to pop up above my input boxes. I tried some of the suggestion from this forum but its not working. can some one help

here is my code

$(function() {
    var dates = $( "#frmdate, #todate" ).datepicker({
        dateFormat: "mm-dd-yy",
        maxDate: 0,
        showOn: "button",
        buttonImage: "<%=request.getContextPath()%>/img/calendar.gif",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        onSelect: function( selectedDate ) {
            var option = this.id == "frmdate" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" );
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        beforeShow: function(input,inst){
                    'top': input.offsetHeight+ 'px', 
                    'left': (input.offsetWidth - input.width)+ 'px'
    $.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});

... ...

<td width="200" align="right" class="label">
<label for="c7">
From: <form:input id="frmdate" path="searchVO.fromDate" size="10" maxlength="10" readonly="true"/>
<td width="300" align="left">
To: <form:input id="todate" path="searchVO.toDate" size="10" maxlength="10" readonly="true"/>&nbsp;&nbsp;[MM-dd-yyyy]                               

When I was debugging I noticed that the pop up will showup in a certain location but as soon as i run the code it moves back to its original location. which tell me that the dynamic location thing is not disabled properly.

please help

  • a sample page could prove to be helpful Gary Hepting almost 8 years ago