[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Javascript calender

Posted on 2004-03-23
6
Medium Priority
?
858 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>
0
Comment
Question by:babasri101
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 10662419
How about this:


<!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="API.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
var calField = "";
function showCalendar(evt, fldName) {
   calField = fldName;
   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[calField].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, 'month');return false" 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, 'month2');return false" 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>


0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10662498
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! :)
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10662503
Oops, sorry Zvonko, I missed your post...
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 63

Expert Comment

by:Zvonko
ID: 10662620
I asked who Kirby is: it is absorbing the opponent and assimilating its features!

You selected your alias well :-)

0
 

Author Comment

by:babasri101
ID: 10663516
thank u all for all the comments .they helped a lot
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10664869
Thanks for the points.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question