How to add two calendars on the same html page

I have used the same code as on this site http://www.roseindia.net/javascript/javascript-calendar.shtml for implementing calendar for my project.and the code is working fine when i use single calendar for a single html page.but while implementing two calendars on same html page it doesn't work..The first calendar works but the second calendar doesn't work.

I have googled it out and learnt that only we need to change the id..But i was unable to do find which id needs to be changed in this code.

Please someone help me with this..

View Answers

November 30, 2011 at 1:14 PM

Do changes in calendar.hmtl file. Rest of the code remains same.

<html>
<head>
   <title>Java Script Calender Date Picker</title>
   <meta http-equiv="Content-Type" content="text/html;">
   <script language="javaScript" type="text/javascript" src="calendar.js"></script>
     <link href="calendar.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#666666">
    <form>
      <input type="text" name="datum1"><a href="#" 
       onClick="setYears(1947, 2012);
       showCalender(this, 'datum1');">
       <img src="calender.png"></a>
<br>
       <input type="text" name="datum2"><a href="#" 
       onClick="setYears(1947, 2012);
       showCalender(this, 'datum2');">
      <img src="calender.png"></a>

    </form>

    <!-- Calender Script  --> 

    <table id="calenderTable">
       <tbody id="calenderTableHead">
         <tr>
           <td colspan="4" align="center">
         <select onChange="showCalenderBody(
                   createCalender(document.getElementById('selectYear').value,
               this.selectedIndex, false));"
                   id="selectMonth">
                  <option value="0">Jan</option>
                  <option value="1">Feb</option>
                  <option value="2">Mar</option>
                  <option value="3">Apr</option>
                  <option value="4">May</option>
                  <option value="5">Jun</option>
                  <option value="6">Jul</option>
                  <option value="7">Aug</option>
                  <option value="8">Sep</option>
                  <option value="9">Oct</option>
                  <option value="10">Nov</option>
                  <option value="11">Dec</option>
              </select>
            </td>
            <td colspan="2" align="center">
        <select onChange="showCalenderBody(createCalender(this.value, 
          document.getElementById('selectMonth').selectedIndex, false));"
              id="selectYear">
        </select>
            </td>
           <td align="center">
        <a href="#" onClick="closeCalender();">
              <font color="#003333" size="+1">X</font>
            </a>
       </td>
    </tr>
       </tbody>
       <tbody id="calenderTableDays">
         <tr style="">
           <td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td>
           <td>Thu</td><td>Fri</td><td>Sat</td>
         </tr>
       </tbody>
       <tbody id="calender"></tbody>
    </table>

<!-- End Calender Script  --> 

  </body>
</html>

November 30, 2011 at 2:29 PM

Thanks this was what i expected..

Thanks a lot