We help IT Professionals succeed at work.

Javascript calender

babasri101
babasri101 asked
on
Medium Priority
961 Views
Last Modified: 2008-02-01
The following is my javascript calender. I have two textboxes and calender.gifs next to them. Now as i click the respective calender.gifs i have to get the date on the respective textboxes. code is as follows. problem is i can change the date only in one of the textboxes and not both.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
      <head>
            <title>Promise to Pay/Support</title>
            <link rel="stylesheet" type="text/css" href="style1.css">
                  <link rel="stylesheet" type="text/css" href="buttonstyles.css">
                        <style type="text/css"> #calendar {position:absolute; left:0px; top:0px; visibility:hidden }
      .calendartable {font-family:Verdana,10pt; border:0; background-color:#FFFFFF; }
      .th {background-color:#9999CC; text-align:center; font-size:10px; width:26px }
      #tableHeader {background-color:#EAEEEE; width:100% }
      .td {background-color:#FFFFFF; text-align:center; font-family:Veranda,5pt; }
      #tableBody tr td {font-family:Veranda,5pt; }
      .z {font-family:Verdana,5pt;}
      #today {background-color:#ffcc33; font-family:Veranda,5pt;}
      a:link {color:#000000; text-decoration:none ;}
      a:active {color:#000000; text-decoration:none;}
      a:visited {color:#000000; text-decoration:none;}
      a:hover {color:#990033; text-decoration:underline;}
      </style>
                        <script src="js/DHTMLAPI.js" type="text/javascript"></script>
                        <script type="text/javascript">
                        
                        /*******************
  UTILITY FUNCTIONS
********************/
// day of week of month's first day
function getFirstDay(theYear, theMonth){
    var firstDate = new Date(theYear,theMonth,1);
    return firstDate.getDay();
}
// number of days in the month
function getMonthLen(theYear, theMonth) {
    var nextMonth = new Date(theYear, theMonth + 1, 1);
    nextMonth.setHours(nextMonth.getHours() - 3);
    return nextMonth.getDate();
}

var l1, t1, l2, t2;

function getElementPosition(elemID) {
      var offsetTrail = document.getElementById(elemID);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != -1 && 
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }    
    return {left:offsetLeft, top:offsetTop};
   
}

// position and show calendar
function showCalendar(evt) {
    evt = (evt) ? evt : event;
   
    if (evt) {
          if (document.getElementById("calendar").style.visibility != "visible") {
              var elem = (evt.target) ? evt.target : evt.srcElement;
              var position = getElementPosition(elem.id);
            shiftTo("calendar", position.left + elem.offsetWidth, position.top);
            show("calendar");
        } else {
            hide("calendar");
        }
    }
}

/************************
  DRAW CALENDAR CONTENTS
*************************/
// clear and re-populate table based on form's selections
function populateTable(form) {
    // pick up date form choices
    var theMonth = form.chooseMonth.selectedIndex;
    var theYear = parseInt(form.chooseYear.options[form.chooseYear.selectedIndex].text);
    // initialize date-dependent variables
    var firstDay = getFirstDay(theYear, theMonth);
    var howMany = getMonthLen(theYear, theMonth);
    var today = new Date();
   
    // fill in month/year in table header
   //document.getElementById("tableHeader").innerHTML =
      //  form.chooseMonth.options[theMonth].text + " " + theYear;
   
    // initialize vars for table creation
    var dayCounter = 1;
    var TBody = document.getElementById("tableBody");
    // clear any existing rows
    while (TBody.rows.length > 0) {
        TBody.deleteRow(0);
    }
    var newR, newC, dateNum;
    var done=false;
    while (!done) {
        // create new row at end
        newR = TBody.insertRow(TBody.rows.length);
        if (newR) {
            for (var i = 0; i < 7; i++) {
                // create new cell at end of row
                newC = newR.insertCell(newR.cells.length);
                if (TBody.rows.length == 1 && i < firstDay) {
                    // empty boxes before first day
                    newC.innerHTML = "&nbsp;";
                    continue;
                }
                if (dayCounter == howMany) {
                    // no more rows after this one
                    done = true;
                }
                // plug in link/date (or empty for boxes after last day)
                if (dayCounter <= howMany) {
                    if (today.getFullYear() == theYear &&
                        today.getMonth() == form.chooseMonth.selectedIndex &&
                        today.getDate() == dayCounter) {
                        newC.id = "today";
                    }
                    newC.innerHTML = "<a href='#'onclick='chooseDate(" +
                        dayCounter + "," + theMonth + "," + theYear +
                        "); return false;'>" + dayCounter + "</a>";
                     dayCounter++;
               } else {
                    newC.innerHTML = "&nbsp;";
                }
            }
        } else {
            done = true;
        }
    }
}

/*******************
  INITIALIZATIONS
********************/
// create dynamic list of year choices
function fillYears() {
    var today = new Date();
    var thisYear = today.getFullYear();
    var yearChooser = document.dateChooser.chooseYear;
    for (i = (thisYear-1); i < thisYear + 2; i++) {
        yearChooser.options[yearChooser.options.length] = new Option(i, i);
    }
    setCurrMonth(today);
}
// set month choice to current month
function setCurrMonth(today) {
    document.dateChooser.chooseMonth.selectedIndex = today.getMonth();
}

/*******************
   PROCESS CHOICE
********************/
function chooseDate(date, month, year) {
    //document.mainForm.date.value = date;
    var v = month+1;  
   
        document.mainForm.month.value =v+"/"+date;    
        document.mainForm.month2.value = v+"/"+date;
    hide("calendar");
}
</script>
      </head>
      <body onload="fillYears(); populateTable(document.dateChooser); initDHTMLAPI()">
            <TABLE id="Table3" class="font2" border="0">
                  <TR>
                        <form id="mainForm" name="mainForm" action="" method="post">
                              <TD width="126">Date:</TD>
                              <TD><INPUT id="month" type="text" name="month" >
                                    <A onclick="javascript:showCalendar(event);" href="#"><IMG id="showit" border="0" src="images/calender.gif"></A>
                              </TD>
                  </TR>
                  <TR>
                        <TD width="126">Alt Lift date:</TD>
                        <TD><INPUT id="month2" type="text" name="month2" >
                              <A onclick="javascript:showCalendar(event);" href="#"><IMG id="Img1" border="0" src="images/calender.gif" ></A>
                              </FORM>
                        </TD>
                  </TR>
            </TABLE>
            <div id="calendar">
                  <table class="calendartable" id="calendarTable1" border="1">
                        <TBODY>
                              <tr>
                                    <th class="th">
                                          Sun</th>
                                    <th class="th">
                                          Mon</th>
                                    <th class="th">
                                          Tue</th>
                                    <th class="th">
                                          Wed</th>
                                    <th class="th">
                                          Thu</th>
                                    <th class="th">
                                          Fri</th>
                                    <th class="th">
                                          Sat</th></tr>
                              <tbody id="tableBody"></tbody>
                              <tr>
                                    <td class="popfont" colSpan="7">
                                          <p>
                                                <form id="Form4" name="dateChooser">
                                                      <select id="Select6" onchange="populateTable(this.form)" name="chooseMonth">
                                                            <option selected>
                                                            January<option>
                                                            February<option>
                                                            March<option>
                                                            April<option>
                                                            May<option>
                                                            June<option>
                                                            July<option>
                                                            August<option>
                                                            September<option>
                                                            October<option>
                                                            November<option>December</option>
                                                      </select>
                                                      <select id="Select7" onchange="populateTable(this.form)" name="chooseYear">
                                                      </select>
                                                </form>
                                          </p>
                                    </td>
                              </tr></table>
            </div>
      </body>
</html>
Comment
Watch Question

Systems architect
CERTIFIED EXPERT
Top Expert 2006
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Here's 3 steps to fix it:

1) create a new javascript variable at the top. e.g.

     var txtField;

2) In your image onclicks, do this:

<A onclick="javascript:txtField='month1';showCalendar(event);" href="#"><IMG id="showit" border="0" src="images/calender.gif"></A>

and where it says txtField='month1', replace 'month1' with the name of the appropriate textbox

3) Change your chooseDate function to this:

function chooseDate(date, month, year) {
    //document.mainForm.date.value = date;
    var v = month+1;  
   
        document.mainForm.elements[txtField].value =v+"/"+date;    
    hide("calendar");
}


That should do it! :)
Oops, sorry Zvonko, I missed your post...
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
I asked who Kirby is: it is absorbing the opponent and assimilating its features!

You selected your alias well :-)

Author

Commented:
thank u all for all the comments .they helped a lot
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Thanks for the points.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.