Please provide calender control for IE11

Question

Hi All

I have Jquery for calender control ,it is working  upto IE8 but in IE11 it's not working

please see the below code what i am using now could please give the solution it is very helpful to me 

 

<script language="javascript" src="../Resources/Script/Calendar.js" type="text/javascript"></script> 

 

var activeElements = new Array();

var activeElementCount = 0;

var calContainer;

function leapYear(year)

{

if((year%4)==0)

{

return true;

}

else

{

return false;

}

}

function checkDay(digit)

{

if(digit < 10)

{

return "0" + digit;

}

else

{

return digit;

}

}

function checkMonth(month)

{

if(month < 10)

{

return "0" + month;

}

else

{

return month;

}

}

function getDays(month, year)

{

var ar = new Array(12);

ar[0] = 31;

ar[1] = (leapYear(year)) ? 29 : 28;

ar[2] = 31;

ar[3] = 30;

ar[4] = 31;

ar[5] = 30;

ar[6] = 31;

ar[7] = 31;

ar[8] = 30;

ar[9] = 31;

ar[10] = 30;

ar[11] = 31;

return ar[month];

};

var ar = new Array(12);

ar[0] = "January";

ar[1] = "February";

ar[2] = "March";

ar[3] = "April";

ar[4] = "May";

ar[5] = "June";

ar[6] = "July";

ar[7] = "August";

ar[8] = "September";

ar[9] = "October";

ar[10] = "November";

ar[11] = "December";

function getMonthName(month)

{

return ar[month]

}

function setCal(mont, referenceObj, calendarDateFormat, calendarDateFieldSeperator, calendarBackColor, textBoxID)

{

var now = new Date();

var nmont=now.getMonth();

var nyear = now.getYear();

now.setDate(1);

now.setMonth((nmont+mont));

var year = now.getYear();

if (year < 1000)

year+=1900;

var month = now.getMonth();

var monthName = getMonthName(month);

var date = now.getDate();

now = null;

var firstDayInstance = new Date(year, month, 1);

var firstDay = firstDayInstance.getDay();

firstDayInstance = null;

var days = getDays(month, year);

return (drawCal(firstDay + 1, days, date, monthName, month, nmont, nyear, year, mont, month, referenceObj, calendarDateFormat, calendarDateFieldSeperator, calendarBackColor, textBoxID))

}

function drawCal(firstDay, lastDate, date, monthName, monthnum, nmont, nyear, year, mont, month, referenceObj, calendarDateFormat, calendarDateFieldSeperator, calendarBackColor, textBoxID)

{

var headerHeight = 4;

var border = 0;

var cellspacing = 0;

var headerColor = "#C93900";

var headerSize = "";

var colWidth = 0;

var dayCellHeight = 8;

var dayColor = "ffffff";

var cellHeight = 0;

// alert(calendarBackColor)

var todayColor = calendarBackColor;

var timeColor = "purple";

//var allmonths='<select style=BORDER: #ECD297 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 5px;font-style: normal; COLOR: #000000; FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif; BACKGROUND-COLOR:#ECD297; border: #CCCC99; name=\"mont\" onchange=\"window.top.frames[3].tom((this.options[this.selectedIndex].value-('+(nmont+((nyear-year)*12))+') ), \''+referenceObj+'\',\''+calendarDateFormat+'\',\''+calendarDateFieldSeperator+'\',\''+calendarBackColor+'\',\''+textBoxID+'\');">';

var allmonths='<select style="BORDER: #444444 1px solid; FONT-SIZE: 11px; FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif; font-weight: normal; text-decoration: none; background-color: #ffffff; font-style: normal; vertical-align: middle; color:#000000;" name=\"mont\" onchange=\"window.top.frames[3].tom((this.options[this.selectedIndex].value-('+(nmont+((nyear-year)*12))+') ), \''+referenceObj+'\',\''+calendarDateFormat+'\',\''+calendarDateFieldSeperator+'\',\''+calendarBackColor+'\',\''+textBoxID+'\');">';

for (i=0; i<ar.length; i++)

{

allmonths=allmonths+'<option value='+i;

if (i==monthnum)

allmonths=allmonths+' selected';allmonths=allmonths+'>'+ar[i]+'</option>';

}

allmonths=allmonths+'</select>';

var text = '';

text += '<center>';text += '<table border=1 cellspacing=0 bgcolor="' + calendarBackColor + '" >';

text += '<tr><th height=' + headerHeight + ' bgcolor=#C93900 align=Left><table border=0 width=100%><tr><th height=' + headerHeight + ' bgcolor=#C93900 align=Left><font face=\'Verdana\' size=2 color=#ffffff>Payment Processor</font></th><th height=' + headerHeight + ' bgcolor=#C93900 align=right><a href="" onclick="window.top.frames[3].document.getElementById(\'iFrameCalendar\').style.visibility=\'hidden\';return false;"><font color="#ffffff" face=\'Verdana\' size=2><B>x</B></font></A>&nbsp;&nbsp;</th></tr></table></th></tr>';

text += '<tr><td>';

text += '<TABLE BORDER=1 CELLSPACING=' + cellspacing + ' bgcolor="#E9C085">';

text += '<tr bgcolor="#FEF4D3"><th colspan=7 HEIGHT=' + headerHeight + ' bgcolor="#FEF4D3" >';

text += '<table width=100%> <tr>';

text += '<td style="FONT-SIZE: 12px;"><A style="text-decoration:none;" HREF="javascript:window.top.frames[3].tom('+(mont-1)+', \''+referenceObj+'\',\''+calendarDateFormat+'\',\''+calendarDateFieldSeperator+'\',\''+calendarBackColor+'\',\''+textBoxID+'\');"><font color="#C93900" face=\'Verdana\' size=1><B>&lt;</B></font></A>&nbsp;';

text += allmonths + ' <A style="text-decoration:none;" HREF="javascript:window.top.frames[3].tom('+(mont+1)+', \''+referenceObj+'\',\''+calendarDateFormat+'\',\''+calendarDateFieldSeperator+'\',\''+calendarBackColor+'\',\''+textBoxID+'\');"><font color="#C93900" face=\'Verdana\' size=1><B>&gt;</B></font></A> ';

text += '</td><td align=right height="5" style="FONT-SIZE: 12px;">';

text += ' <A style="text-decoration:none;" HREF="javascript:window.top.frames[3].tom('+(mont-12)+', \''+referenceObj+'\',\''+calendarDateFormat+'\',\''+calendarDateFieldSeperator+'\',\''+calendarBackColor+'\',\''+textBoxID+'\');"><font color="#C93900" face=\'Verdana\' size=1><B>&lt;</B></font></A> <input type=text style="BORDER-RIGHT: #333333 1px solid; BORDER-TOP: #333333 1px solid; FONT-SIZE: 10px; BORDER-LEFT: #333333 1px solid; COLOR: #000000; BORDER-BOTTOM: #333333 1px solid; FONT-FAMILY: Verdana, Arial; BACKGROUND-COLOR: #faf9f5" name="y_year" size="5" maxlength=4 value='+year+' onblur="if(!Number(this.value) || this.value.length<1) {alert (\'Improper Year\'); this.focus(); return false;} window.top.frames[3].tom((12*(this.value-'+nyear+'))+('+mont%12+'), \''+referenceObj+'\',\''+calendarDateFormat+'\',\''+calendarDateFieldSeperator+'\',\''+calendarBackColor+'\',\''+textBoxID+'\');"> <A style="text-decoration:none;" HREF="javascript:window.top.frames[3].tom('+(mont+12)+', \''+referenceObj+'\',\''+calendarDateFormat+'\',\''+calendarDateFieldSeperator+'\',\''+calendarBackColor+'\',\''+textBoxID+'\');" ><font color="#C93900" face=\'Verdana\' size=1><B>&gt;</B></font></A>';

text += '</FONT></td>';text += '';

text += ' </tr></table>';

text += '</TH></tr>';

var openCol = '<TD width=9 height=9 bgcolor="#FEF4D3">';

openCol += '<FONT face=\'Verdana\' size=1 COLOR=\'red\'">';

var closeCol = '</FONT></TD>';

var weekDay = new Array(7);

weekDay[0] = "Sun";

weekDay[1] = "Mon";

weekDay[2] = "Tue";

weekDay[3] = "Wed";

weekDay[4] = "Thu";

weekDay[5] = "Fri";

weekDay[6] = "Sat";

text += '<TR ALIGN="center" valign="middle">';

for (var dayNum = 0; dayNum < 7; ++dayNum)

{

text += openCol + weekDay[dayNum] + closeCol;

}

text += '</TR>';

var digit = 1;

var curCell = 1;

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row)

{

text += '<TR ALIGN="right" VALIGN="top">';

for (var col = 1; col <= 7; ++col)

{

if (digit > lastDate)

{

text += '<TD bgcolor="#FEF4D3">&nbsp;</TD>';curCell++;

}

else if (curCell < firstDay)

{

text += '<TD bgcolor="#FEF4D3">&nbsp;</TD>';

curCell++;

}

else

{

var d= new Date();

if ((digit == d.getDate()) && (month==d.getMonth()) && ( year==((d.getYear(year)>1000) ? d.getYear(year) : d.getYear(year)+1000)))

{

text += '<TD bgcolor="#FEF4D3" HEIGHT=' + cellHeight + '>';

if(calendarDateFormat=='MMDDYYYY')

text += '<a href="" onclick="window.top.frames[3].document.getElementById(\'' + textBoxID + '\').value=\'' + (month + 1) + '\\' + calendarDateFieldSeperator + digit + '\\' + calendarDateFieldSeperator + year + '\';window.top.frames[3].document.getElementById(\'iFrameCalendar\').style.visibility=\'hidden\';window.top.frames[3].document.getElementById(\'' + textBoxID + '\').focus();return false;"><FONT face=\'Verdana\' size=1 COLOR="' + todayColor + '"><b>';

else

text += '<a href="" onclick="window.top.frames[3].document.getElementById(\'' + textBoxID + '\').value=\'' + (checkDay(digit)) + '\\' + calendarDateFieldSeperator + (checkMonth(month + 1)) + '\\' + calendarDateFieldSeperator + year + '\';window.top.frames[3].document.getElementById(\'iFrameCalendar\').style.visibility=\'hidden\';window.top.frames[3].document.getElementById(\'' + textBoxID + '\').focus();return false;"><FONT face=\'Verdana\' size=1 COLOR="' + todayColor + '"><b>';

text += digit;

text += '</FONT></a>';

text += '&nbsp;</TD>';

}

else

{

if(calendarDateFormat=='MMDDYYYY')

text += '<TD bgcolor="#FEF4D3" HEIGHT=' + cellHeight + '><a href="" onclick="window.top.frames[3].document.getElementById(\'' + textBoxID + '\').value=\'' + (month + 1) + '\\' + calendarDateFieldSeperator + digit + '\\' + calendarDateFieldSeperator + year + '\';window.top.frames[3].document.getElementById(\'iFrameCalendar\').style.visibility=\'hidden\';window.top.frames[3].document.getElementById(\'' + textBoxID + '\').focus();return false;"><font color=black face=\'Verdana\' size=1 >';

else

text += '<TD bgcolor="#FEF4D3" HEIGHT=' + cellHeight + '><a href="" onclick="window.top.frames[3].document.getElementById(\'' + textBoxID + '\').value=\'' + (checkDay(digit)) + '\\' + calendarDateFieldSeperator + (checkMonth(month + 1)) + '\\' + calendarDateFieldSeperator + year + '\';window.top.frames[3].document.getElementById(\'iFrameCalendar\').style.visibility=\'hidden\';window.top.frames[3].document.getElementById(\'' + textBoxID + '\').focus();return false;"><font color=black face=\'Verdana\' size=1 >';

text += digit + '</font></a>&nbsp;</TD>';

}

digit++;

}

}

text += '</TR>';

}

text += '</TABLE>';

text += '</td></tr></table>';

text += '</CENTER>';

return(text);

}

function tom(mont,referenceObj, calendarDateFormat, calendarDateFieldSeperator, calendarBackColor, textBoxID)

{

var screenHeight = screen.availHeight;

var screenWidth = screen.availWidth;

var objectPosX = findPosX(document.getElementById(referenceObj));

var objectPosY = findPosY(document.getElementById(referenceObj));

var objectWidth = document.getElementById(referenceObj).width;

if(!document.getElementById('iFrameCalendar'))

{

var objCalendar = document.createElement('<iframe id="iFrameCalendar" style="width:200px;height:220px;position:absolute;display:none;" frameborder=0 scrolling=no marginwidth=0 src="" marginheight=0></iframe>');

document.body.appendChild(objCalendar);

}

calContainer = document.getElementById('iFrameCalendar');

calContainer.style.top = objectPosY + 'px';

calContainer.style.left = objectPosX + objectWidth + 'px';

calContainer.style.display = "block";

copyContent(setCal(mont, referenceObj, calendarDateFormat, calendarDateFieldSeperator, calendarBackColor,textBoxID));

calContainer.style.visibility = "visible";

}

function findPosX(obj)

{

var curleft = 0;

if (obj.offsetParent)

{

while (obj.offsetParent)

{

curleft += obj.offsetLeft;obj = obj.offsetParent;

}

}

else if (obj.x)curleft += obj.x;return curleft;

}

function findPosY(obj)

{

var curtop = 0;

if (obj.offsetParent)

{

while (obj.offsetParent)

{

curtop += obj.offsetTop;obj = obj.offsetParent;

}

}

else if (obj.y)curtop += obj.y;return curtop;

}

function copyContent(strContent)

{

var iFrameContent = "<html><body topmargin='0' leftmargin='0' rightmargin='0' bgColor='#FEF4D3'><div id='divCalendar'>%message%</div></body></html>";

var newContent = iFrameContent.replace(/\%message\%/, strContent);

var doc = getIFrameDoc();doc.open();doc.write(newContent);doc.close();

}

function getIFrameDoc()

{

var iFrame = document.getElementById("iFrameCalendar");

var doc = iFrame.contentDocument;

if (doc == undefined)doc = iFrame.contentWindow.document;

return doc;

}

 

<asp:TextBox ID="txtFromDate" runat="server" Width="100px" onkeydown="return false;"></asp:TextBox>

<img id="imgCal" onclick="tom(0, 'imgCal', 'DDMMYYYY', '/', '#b9b99e', 'txtFromDate');"

height="14" src="../Resources/Images/icon_Cal.gif" width="12" align="absMiddle" />