By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,496 Members | 1,280 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,496 IT Pros & Developers. It's quick & easy.

JavaScript-Calender date cant displayed in Mozilla FireFox

P: 38
Hello Bytes,

i have a calender program which is created by using Javascript. when i execute that program using Internet Explorer,it works properly but when i tried in Mozilla firefox it didnt worked.
Dates of particular year,month not displayed in that calender grids. i have collected that coding from online free resources.
Here i have attached code for your reference. please do suggest me how do i display the calender date in grids in Mozilla Firefox.

file Name:calender.html
Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3. <head>
  4. <script language="JavaScript">
  5. <!--
  6. var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
  7. var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
  8. var days = new Array("S", "M", "T", "W", "T", "F", "S");
  9.  
  10. today = new getToday();    
  11. var element_id;
  12.  
  13. function getDays(month, year) 
  14. {
  15.     // Test for leap year when February is selected.
  16.     if (1 == month)
  17.         return ((0 == year % 4) && (0 != (year % 100))) ||
  18.             (0 == year % 400) ? 29 : 28;
  19.     else
  20.         return daysInMonth[month];
  21. }
  22.  
  23. function getToday()
  24. {
  25.     // Generate today's date.
  26.     this.now = new Date();
  27.     this.year = this.now.getFullYear() ; // Returned year XXXX
  28.     this.month = this.now.getMonth();
  29.     this.day = this.now.getDate();
  30. }
  31.  
  32.  
  33. function newCalendar() 
  34. {
  35.     var parseYear = parseInt(document.all.year  [document.all.year.selectedIndex].text);
  36.  
  37.     var newCal = new Date(parseYear , document.all.month.selectedIndex, 1);
  38.     var day = -1;
  39.     var startDay = newCal.getDay();
  40.     var daily = 0; 
  41.  
  42.     today = new getToday(); // 1st call
  43.     if ((today.year == newCal.getFullYear() ) &&   (today.month == newCal.getMonth()))
  44.        day = today.day;
  45.     // Cache the calendar table's tBody section, dayList.
  46.     var tableCal = document.all.calendar.tBodies.dayList;
  47.  
  48.     var intDaysInMonth =
  49.        getDays(newCal.getMonth(), newCal.getFullYear() );
  50.  
  51.     for (var intWeek = 0; intWeek < tableCal.rows.length;  intWeek++)
  52.            for (var intDay = 0;
  53.              intDay < tableCal.rows[intWeek].cells.length;
  54.              intDay++)
  55.      {
  56.           var cell = tableCal.rows[intWeek].cells[intDay];
  57.  
  58.           // Start counting days.
  59.           if ((intDay == startDay) && (0 == daily))
  60.              daily = 1;
  61.  
  62.           // Highlight the current day.
  63.           cell.style.color = (day == daily) ? "red" : "";
  64.           if(day == daily)
  65.           {
  66.                 document.all.todayday.innerText= "Today: " +  newCal.getFullYear()+ "-" + 
  67.                     (newCal.getMonth()+1) + "-" + day ;
  68.           }
  69.           // Output the day number into the cell.
  70.           if ((daily > 0) && (daily <= intDaysInMonth))
  71.              cell.innerText = daily++;
  72.           else
  73.              cell.innerText = "";
  74.        }
  75.  
  76. }
  77.  
  78.      function getTodayDay()
  79.      {
  80.                 document.all[element_id].value = today.year + "-" + (today.month+1) + 
  81.                     "-" + today.day ; 
  82.                 //document.all.calendar.style.visibility="hidden";
  83.                 document.all.calendar.style.display="none";
  84.                 document.all.year.selectedIndex =100;   
  85.                 document.all.month.selectedIndex = today.month; 
  86.      }
  87.  
  88.         function getDate() 
  89.          {
  90.             // This code executes when the user clicks on a day
  91.             // in the calendar.
  92.             if ("TD" == event.srcElement.tagName)
  93.                // Test whether day is valid.
  94.                if ("" != event.srcElement.innerText)
  95.                { 
  96.                  var mn = document.all.month.selectedIndex+1;
  97.                  var Year = document.all.year [document.all.year.selectedIndex].text;
  98.                  document.all[element_id].value=Year+"-"+mn +"-"  +event.srcElement.innerText;
  99.                  //document.all.calendar.style.visibility="hidden";
  100.                  document.all.calendar.style.display="none";
  101.              }
  102.          }
  103.  
  104. function GetBodyOffsetX(el_name, shift)
  105. {
  106.     var x;
  107.     var y;
  108.     x = 0;
  109.     y = 0;
  110.  
  111.     var elem = document.all[el_name];
  112.     do 
  113.     {
  114.         x += elem.offsetLeft;
  115.         y += elem.offsetTop;
  116.         if (elem.tagName == "BODY")
  117.             break;
  118.         elem = elem.offsetParent; 
  119.     } while  (1 > 0);
  120.  
  121.     shift[0] = x;
  122.     shift[1] = y;
  123.     return  x;
  124. }    
  125.  
  126. function SetCalendarOnElement(el_name)
  127. {
  128.     if (el_name=="") 
  129.     el_name = element_id;
  130.     var shift = new Array(2);
  131.     GetBodyOffsetX(el_name, shift);
  132.     document.all.calendar.style.pixelLeft  = shift[0]; //  - document.all.calendar.offsetLeft;
  133.     document.all.calendar.style.pixelTop = shift[1] + 25 ;
  134. }
  135.  
  136.  
  137.  
  138. function ShowCalendar(elem_name)
  139. {
  140.         if (elem_name=="")
  141.         elem_name = element_id;
  142.  
  143.         element_id    = elem_name; // element_id is global variable
  144.         newCalendar();
  145.         SetCalendarOnElement(element_id);
  146.         //document.all.calendar.style.visibility = "visible";
  147.         document.all.calendar.style.display="inline";
  148. }
  149.  
  150. function HideCalendar()
  151. {
  152.     //document.all.calendar.style.visibility="hidden";
  153.     document.all.calendar.style.display="none";
  154. }
  155.  
  156. function toggleCalendar(elem_name)
  157. {
  158.     //if (document.all.calendar.style.visibility == "hidden")
  159.     if(document.all.calendar.style.display=="none")
  160.         ShowCalendar(elem_name);
  161.     else 
  162.         HideCalendar();
  163. }
  164. -->
  165. </script>
  166.  
  167. <style>
  168. .today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold}
  169. .days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center}
  170. .dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt}
  171. </style>
  172.  
  173.  
  174. </head>
  175. <body>
  176. <FORM name=myForm>
  177. <INPUT id=MyDate name=MyDate size=15> 
  178. <a href="javascript:;" onClick="toggleCalendar('MyDate')">Calendar</a>
  179. </form>
  180.  
  181.  
  182. <TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4">
  183.   <TBODY>
  184.   <TR>
  185.     <TD colSpan=7 vAlign=center>
  186.     <!-- Month combo box -->
  187.     <SELECT id=month onchange=newCalendar()> 
  188.         <SCRIPT language=JavaScript>
  189.         // Output months into the document.
  190.         // Select current month.
  191.         for (var intLoop = 0; intLoop < months.length; intLoop++)
  192.             document.write("<OPTION " +    (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]);
  193.         </SCRIPT>
  194.     </SELECT> 
  195.     <!-- Year combo box -->
  196.     <SELECT id=year onchange=newCalendar()> 
  197.         <SCRIPT language=JavaScript>
  198.         // Output years into the document.
  199.         // Select current year.
  200.         for (var intLoop = 1900; intLoop < 2028; intLoop++)
  201.             document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop);
  202.         </SCRIPT>
  203.     </SELECT> 
  204.  
  205.     </TD>
  206.   </TR>
  207.  
  208.  
  209.  
  210.   <TR class=days>
  211.     <!-- Generate column for each day. -->
  212.     <SCRIPT language=JavaScript>
  213.     // Output days.
  214.     for (var intLoop = 0; intLoop < days.length; intLoop++)
  215.         document.write("<TD>" + days[intLoop] + "</TD>");
  216.     </SCRIPT>
  217.   </TR>
  218.  
  219.  
  220.   <TBODY class=dates id=dayList onclick="getDate('')" vAlign=center>
  221.   <!-- Generate grid for individual days. -->
  222.   <SCRIPT language=JavaScript>
  223.     for (var intWeeks = 0; intWeeks < 6; intWeeks++)
  224.     {
  225.         document.write("<TR>");
  226.         for (var intDays = 0; intDays < days.length; intDays++)
  227.             document.write("<TD></TD>");
  228.         document.write("</TR>");
  229.     }
  230.   </SCRIPT>
  231.  
  232.   <!-- Generate today day. --></TBODY>
  233.   <TBODY>
  234.   <TR>
  235.     <TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD>
  236.     <TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD>
  237.   </TR>
  238.   </TBODY>
  239.  
  240. </TABLE>
  241.  
  242. </body>
  243. </html>
  244.  
  245.  
  246.  
Jun 29 '09 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
The code is very IE-specific. Just by a cursory glance, I noticed:
1. document.all
2. innerText
3. global window.event
4. srcElement

All non-standard and will not work in most browsers. Since you've got this for free online, scrap this code - it's not worth the effort changing it - and get a decent cross-browser calendar. I suggest you try Dynarch.
Jun 29 '09 #2

Post your reply

Sign in to post your reply or Sign up for a free account.