Solved

Javascript calender

Posted on 2004-03-23
6
822 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
  • 3
  • 2
6 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 125 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now