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..
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>
Thanks this was what i expected..
Thanks a lot
Ads