JavaScript Calendar Popup

Hi,

I have table with two date fields.. When I click the calendar image for the first date field ( Date of Birth) calendar popup apperared correctly with the selected date... When I select the calendar image for the second date field (Passport applied date) value doesnt appear..

Can any one please correct my code... I have a html and calendar.js code...

Problem:

Date of Birth ---> 12/01/2012 (user selected date)

Passport Date --> 12/01/2012 ( above field value pasted here)

Html:

JavaScript:

var popUpCal = {
  selectedMonth: new Date().getMonth(),
  // 0-11
  selectedYear: new Date().getFullYear(),
  // 4-digit year
  selectedDay: new Date().getDate(),
  calendarId: 'calendarDiv',
  inputClass: 'calendarSelectDate',

init: function() {
    var x = getElementsByClass(popUpCal.inputClass, document, 'input');
    var y = document.getElementById(popUpCal.calendarId);
    // set the calendar position based on the input position
    for (var i = 0; i < x.length; i++) {
      x[i].onfocus = function() {
        popUpCal.selectedMonth = new Date().getMonth();
        setPos(this, y);
        // setPos(targetObj,moveObj)
        y.style.display = 'block';
        popUpCal.drawCalendar(this);
        popUpCal.setupLinks(this);
      };
    }
  },

drawCalendar: function(inputObj) {

var html = '';
    html = '<a id="close"><u><b>Close</b></u></a>';
    /*html = '<input type="image" src="images/close_Button.png" id="close"'>;*/
    /*html='<img name="jsbutton" src="images/close_Button.png" id="close" alt="javascript button"'>;*/
    html += '<table cellpadding="0" cellspacing="0" id="linksTable"><tr>';
    html += '	<td><a id="prevMonth"><< Prev</a></td>';
    html += '	<td><a id="nextMonth">Next >></a></td>';
    html += '</tr></table>';
    html += '<table id="calendar" cellpadding="0" cellspacing="0"><tr>';
    html += '<th colspan="7" class="calendarHeader">' + getMonthName(popUpCal.selectedMonth) + ' ' + popUpCal.selectedYear + '</th>';
    html += '</tr><tr class="weekDaysTitleRow">';
    var weekDays = new Array('S', 'M', 'T', 'W', 'T', 'F', 'S');
    for (var j = 0; j < weekDays.length; j++) {
      html += '<td>' + weekDays[j] + '</td>';
    }

var daysInMonth = getDaysInMonth(popUpCal.selectedYear, popUpCal.selectedMonth);
    var startDay = getFirstDayofMonth(popUpCal.selectedYear, popUpCal.selectedMonth);
    var numRows = 0;
    var printDate = 1;
    if (startDay != 7) {
      numRows = Math.ceil(((startDay + 1) + (daysInMonth)) / 7);
      // calculate the number of rows to generate
    }

// calculate number of days before calendar starts
    if (startDay != 7) {
      var noPrintDays = startDay + 1;
    } else {
      var noPrintDays = 0;
      // if sunday print right away	
    }
    var today = new Date().getDate();
    var thisMonth = new Date().getMonth();
    var thisYear = new Date().getFullYear();
    // create calendar rows
    for (var e = 0; e < numRows; e++) {
      html += '<tr class="weekDaysRow">';
      // create calendar days
      for (var f = 0; f < 7; f++) {
        if ((printDate == today)
        && (popUpCal.selectedYear == thisYear)
        && (popUpCal.selectedMonth == thisMonth)
        && (noPrintDays == 0)) {
          html += '<td id="today" class="weekDaysCell">';
        } else {
          html += '<td class="weekDaysCell">';
        }
        if (noPrintDays == 0) {
          if (printDate <= daysInMonth) {
            html += '<a>' + printDate + '</a>';
          }
          printDate++;
        }
        html += '</td>';
        if (noPrintDays > 0) noPrintDays--;
      }
      html += '</tr>';
    }
    html += '</table>';
    html += '';

// add calendar to element to calendar Div
    var calendarDiv = document.getElementById(popUpCal.calendarId);
    calendarDiv.innerHTML = html;

// close button link
    document.getElementById('close').onclick = function() {
      calendarDiv.style.display = 'none';
    };
    // setup next and previous links
    document.getElementById('prevMonth').onclick = function() {
      popUpCal.selectedMonth--;
      if (popUpCal.selectedMonth < 0) {
        popUpCal.selectedMonth = 11;
        popUpCal.selectedYear--;
      }
      popUpCal.drawCalendar(inputObj);
      popUpCal.setupLinks(inputObj);
    };
    document.getElementById('nextMonth').onclick = function() {
      popUpCal.selectedMonth++;
      if (popUpCal.selectedMonth > 11) {
        popUpCal.selectedMonth = 0;
        popUpCal.selectedYear++;
      }
      popUpCal.drawCalendar(inputObj);
      popUpCal.setupLinks(inputObj);
    };

},
  // end drawCalendar function
  setupLinks: function(inputObj) {
    // set up link events on calendar table
    var y = document.getElementById('calendar');
    var x = y.getElementsByTagName('a');
    var TeamDOJ = true;
    var iNautixDOJ =true;
    for (var i = 0; i < x.length; i++) {
      x[i].onmouseover = function() {
        this.parentNode.className = 'weekDaysCellOver';
      };
      x[i].onmouseout = function() {
        this.parentNode.className = 'weekDaysCell';
      };
      x[i].onclick = function() {
        document.getElementById(popUpCal.calendarId).style.display = 'none';
        popUpCal.selectedDay = this.innerHTML;
         
       document.getElementById('textBox').value =formatDate(popUpCal.selectedDay, popUpCal.selectedMonth, popUpCal.selectedYear); 
==========> Date of Birth field filled with date which is selected by user....

=======================================================================> 
How to fill the Passport Date field when the user click the calendar image...
      
      
    };
  };
  }
};

// Add calendar event that has wide browser support
if (typeof window.addEventListener != "undefined")
 window.addEventListener("load", popUpCal.init, false);
else if (typeof window.attachEvent != "undefined")
 window.attachEvent("onload", popUpCal.init);
else {
  if (window.onload != null) {
    var oldOnload = window.onload;
    window.onload = function(e) {
      oldOnload(e);
      popUpCal.init();
    };
  }
  else
  window.onload = popUpCal.init;
}

/* Functions Dealing with Dates */

function formatDate(Day, Month, Year) {
  Month++;
  // adjust javascript month
  if (Month < 10) Month = '0' + Month;
  // add a zero if less than 10
  if (Day < 10) Day = '0' + Day;
  // add a zero if less than 10
  var dateString = Month + '/' + Day + '/' + Year;
  return dateString;
}

function getMonthName(month) {
  var monthNames = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
  return monthNames[month];
}

function getDayName(day) {
  var dayNames = new Array('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday')
  return dayNames[day];
}

function getDaysInMonth(year, month) {
  return 32 - new Date(year, month, 32).getDate();
}

function getFirstDayofMonth(year, month) {
  var day;
  day = new Date(year, month, 0).getDay();
  return day;
}

/* Common Scripts */

/* Position Functions */

function setPos(targetObj, moveObj) {
  var coors = findPos(targetObj);
  moveObj.style.position = 'absolute';
  moveObj.style.top = coors[1] + 18 + 'px';
  moveObj.style.left = coors[0] + 'px';
}

function findPos(obj) {
  var curleft = curtop = 0;
  if (obj.offsetParent) {
    curleft = obj.offsetLeft
    curtop = obj.offsetTop
    while (obj = obj.offsetParent) {
      curleft += obj.offsetLeft
      curtop += obj.offsetTop
    }
  }
  return [curleft, curtop];
}