0
실제로 datepicker.it 캘린더는 javascript를 사용하고 있습니다. Mozilla firfox와 Chrome에서 잘 작동합니다. IE 9의 경우이 페이지는 처음으로 작동하며이 페이지에서 모든 서버 사이드 이벤트가 발생합니다.이게 작동하지 않습니다. 이유가 무엇입니까. 내 ASCX 파일에서Javascript Calendar Datepicker가 IE 9에서 작동하지 않습니다.
<script type="text/javascript" language="javascript">
function positionInfo(object)
{
var p_elm = object;
this.getElementLeft = getElementLeft;
function getElementLeft()
{
var x = 0;
var elm;
if(typeof(p_elm) == "object")
{
elm = p_elm;
}
else
{
elm = document.getElementById(p_elm);
}
while (elm != null)
{
x+= elm.offsetLeft;
elm = elm.offsetParent;
}
return parseInt(x);
}
this.getElementWidth = getElementWidth;
function getElementWidth()
{
var elm;
if(typeof(p_elm) == "object")
{
elm = p_elm;
}
else
{
elm = document.getElementById(p_elm);
}
return parseInt(elm.offsetWidth);
}
this.getElementRight = getElementRight;
function getElementRight()
{
return getElementLeft(p_elm) + getElementWidth(p_elm);
}
this.getElementTop = getElementTop;
function getElementTop()
{
var y = 0;
var elm;
if(typeof(p_elm) == "object")
{
elm = p_elm;
}
else
{
elm = document.getElementById(p_elm);
}
while (elm != null) {
y+= elm.offsetTop;
elm = elm.offsetParent;
}
return parseInt(y);
}
this.getElementHeight = getElementHeight;
function getElementHeight(){
var elm;
if(typeof(p_elm) == "object")
{
elm = p_elm;
}
else
{
elm = document.getElementById(p_elm);
}
return parseInt(elm.offsetHeight);
}
this.getElementBottom = getElementBottom;
function getElementBottom(){
return getElementTop(p_elm) + getElementHeight(p_elm);
}
}
function CalendarControl() {
var startyr,endyr;
var calendarId = 'CalendarControl';
var currentYear = 0;
var currentMonth = 0;
var currentDay = 0;
var selectedYear = 0;
var selectedMonth = 0;
var selectedDay = 0;
var months = ['Jan','Feb','Mar','Apr','May','Jun','July','Aug','Sep','Oct','Nov','Dec'];
var monthstring = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var dateField = null;
function getProperty(p_property)
{
var p_elm = calendarId;
var elm = null;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
if (elm != null)
{
if(elm.style)
{
elm = elm.style;
if(elm[p_property])
{
return elm[p_property];
}
else
{
return null;
}
}
else
{
return null;
}
}
}
function setElementProperty(p_property, p_value, p_elmId)
{
var p_elm = p_elmId;
var elm = null;
if(typeof(p_elm) == "object"){
elm = p_elm;
} else {
elm = document.getElementById(p_elm);
}
if((elm != null) && (elm.style != null)){
elm = elm.style;
elm[ p_property ] = p_value;
}
}
function setProperty(p_property, p_value) {
setElementProperty(p_property, p_value, calendarId);
}
function getDaysInMonth(year, month) {
return [31,((!(year % 4) && ((year % 100) || !(year % 400)))?29:28),31,30,31,30,31,31,30,31,30,31][month-1];
}
function getDayOfWeek(year, month, day) {
var date = new Date(year,month-1,day)
return date.getDay();
}
this.setDate = setDate;
function setDate(year, month, day) {
if (dateField) {
if (month < 10) {month = "0" + month;}
if (day < 10) {day = "0" + day;}
var dateString = month+"/"+day+"/"+year;
dateField.value = dateString;
hide();
}
return;
}
this.changeMonth = changeMonth;
function changeMonth(change,month,DateorMonthList)
{
if(DateorMonthList==0)
{
currentMonth += change;
currentDay = 0;
if(currentMonth > 12) {
currentMonth = 1;
currentYear++;
} else if(currentMonth < 1) {
currentMonth = 12;
currentYear--;
}
}
else
{
currentMonth=month;
}
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();
}
this.changeYear = changeYear;
function changeYear(change) {
currentYear += change;
currentDay = 0;
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();
}
function getCurrentYear() {
var year = new Date().getYear();
if(year < 1900) year += 1900;
return year;
}
function getCurrentMonth() {
return new Date().getMonth() + 1;
}
function getCurrentDay() {
return new Date().getDate();
}
function calendarDrawTable()
{
var dayOfMonth = 1;
var validDay = 0;
var startDayOfWeek = getDayOfWeek(currentYear, currentMonth, dayOfMonth);
var daysInMonth = getDaysInMonth(currentYear, currentMonth);
var css = null;
var tempyear=0,tempMonth=0;
var table = "<table style='table-layout:fixed;width:170px;height:170px;font-family: arial, Verdana, helvetica, sans-serif;font-size: 9pt;border-width:1pt;border-style:solid;border-color:Black;'>";
table=table+"<tr>";
table = table + "<td><a href=\'javascript:changeCalendarControlMonth(0,"+ currentMonth +",0)'><img src='Images/PreviousIcon.Bmp' style=border-color:white><a></td>";
table = table + "<td colspan='5' style=text-align:Center;><a href=\'javascript:changeCalendarControlMonth(2,"+ currentMonth +",0)' style='text-decoration:underline;font-size:9pt;font-weight:bold;color:black;text-align:center;font-family:Segoe UI, Verdana, Helvetica, sans-serif;text-align:center;'onmouseover=this.style.color='#5378C1'; onmouseout=this.style.color='black';>"+ monthstring[currentMonth-1] +", " +currentYear + "</a></td>";
table = table + "<td><a href=\'javascript:changeCalendarControlMonth(1,"+ currentMonth +",0)'><img src='Images/NextIcon.Bmp' style=border-color:white><a></td>";
table=table+"</tr>";
table = table + "<tr style='font-weight: bold;'><th>Su</th><th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th></tr>";
for(var week=0; week < 6; week++)
{
table = table + "<tr>";
for(var dayOfWeek=0; dayOfWeek <=6; dayOfWeek++)
{
if(week == 0 && startDayOfWeek == dayOfWeek)
{
validDay = 1;
}
else if (validDay == 1 && dayOfMonth > daysInMonth)
{
validDay = 0;
}
if(validDay)
{
if (dayOfMonth == selectedDay && currentYear == selectedYear && currentMonth == selectedMonth)
{
//selected date
css = "text-decoration:none;color:#5378C1;width: 2em; background-color:#D0DFFA;font-weight: bold;";
}
else if (dayOfWeek == 0 || dayOfWeek == 6)
{
//inside the calendar
css = "text-decoration: none;border:solid 1px #FFF;color:black;font-size:8pt;font-weight: bold;";
}
else {
css = "text-decoration: none;border:solid 1px #FFF;color:black;font-size:8pt;font-weight: bold;";
}
table = table + "<td><a style='"+css+"' href=\"javascript:setCalendarControlDate("+currentYear+","+currentMonth+","+dayOfMonth+")\" onmouseover=this.style.color='black';this.style.background='#D0DFFA';this.style.fontWeight='bold'; onmouseout=if("+dayOfMonth+"=="+selectedDay+"){this.style.background='#D0DFFA';this.style.color='black'}else{this.style.background='white';this.style.color='black'};this.style.fontWeight='bold';>"+dayOfMonth+"</a></td>";
dayOfMonth++;
}
else
{
table = table + "<td></td>";
}
}
table = table + "</tr>";
}
//"Close" css
table = table + "<tr><th colspan='7' style='padding: 3px;vertical-align:middle'><a href='javascript:hideCalendarControl();' style=color:black;font-weight:bold;text-decoration:none;font-size:8pt;font-family:verdana>Close</a></th></tr>";
table = table + "</table>";
tempyear=currentYear;
tempMonth=currentMonth;
return table;
}
this.createMonthTable=createMonthTable;
function createMonthTable(change,yr,Monthoryear)
{
if(Monthoryear=="month")
{
currentYear=currentYear+change;
}
else
{
currentYear=yr;
}
var count=1;
var table = "<table style=border-color:black;border-style:solid;border-width:1pt;font-family: arial, Verdana, helvetica, sans-serif;><tr><td><table style=table-layout:fixed;width:160px;>";
table=table+"<tr><td><a href='javascript:changeCalendarControlYear(-1,1);'><img src='Images/PreviousIcon.Bmp' style=border-color:white;></img></a></td>";
table = table + "<td colspan='5' style=text-align:Center;><a href=\'javascript:changeCalendarControlYear(-11,2);' style='text-decoration:none;font-size:8pt;color:black;font-weight:bold;' onmouseover=this.style.color='#5378C1'; onmouseout=this.style.color='black';>"+ currentYear + "</a></td>";
table = table + "<td><a href='javascript:changeCalendarControlYear(1,1);'><img src=Images/NextIcon.Bmp style=border-color:white;></img></a></td></tr>";
table=table+"</table><table style=table-layout:fixed;width:160px;height:138px;><tr>";
for(i=0;i<months.length;i++)
{
count++;
table=table+"<td colspan=2 style=text-align:center;height:30px;><a href=\'javascript:changeCalendarControlMonth(0,"+ (i+1) +",1)' style='text-decoration: none;color:Black; font-size:8pt;' onmouseover=this.style.color='#5378C1';this.style.background='#D0DFFA';this.style.fontWeight='bold'; onmouseout=this.style.color='black';this.style.fontWeight='normal';this.style.background='white';>"+months[i]+"</a></td>";
if(count==5)
{
table=table+"</tr><tr>";
count=1;
}
}
table=table+"</tr>";
table = table + "<tr><th colspan='8' style='padding: 3px;text-align:center;vertical-align:middle'><a href='javascript:hideCalendarControl();' style=color:black;font-weight:bold;text-decoration:none;font-size:8pt;font-family:verdana>Close</a></th></tr>";
table=table+"</table></td></tr></table>";
var calendarId = 'CalendarControl';
var Calendar=document.getElementById(calendarId);
Calendar.innerHTML = table;
Setposition();
}
this.CreateYearTable=CreateYearTable;
function CreateYearTable(value,M_D_Y)
{
var d=new Date();
if(M_D_Y==2)
{
startyr=currentYear+value;
endyr=currentYear;
}
else
{
if(value == 11)
{
startyr=endyr+1;
endyr=startyr+value;
}
else
{
endyr=startyr-1;
startyr=endyr+value;
}
}
var count=1;
var table = "<table style=border-color:black;border-style:solid;border-width:1pt;font-family: arial, Verdana, helvetica, sans-serif;><tr><td><table style=table-layout:fixed;width:160px;>";
table=table+"<tr><td><a href='javascript:changeCalendarControlYear(-11,4);'><img src='Images/PreviousIcon.Bmp' style=border-color:white;></img></a></td>";
table = table + "<td colspan='5' style='text-decoration:none;font-size:8pt;font-weight:bold;color:black;text-align:center' onmouseover=this.style.color='#5378C1'; onmouseout=this.style.color='black';>"+startyr+" - "+ endyr + "</td>";
table = table + "<td><a href='javascript:changeCalendarControlYear(11,4);'><img src='Images/NextIcon.Bmp' style=border-color:white;></img></a></td></tr>";
table=table+"</table><table style=table-layout:fixed;width:160px;height:138px;><tr>";
for(var i=startyr;i<=endyr;i++)
{
count++;
table=table+"<td colspan=2 style=text-align:center;height:30px;><a href=\'javascript:changeCalendarControlYear("+i+",3)' style='text-decoration: none;color:Black; font-size:8pt;vertical-align:bottom;text-align:center;' onmouseover=this.style.color='#5378C1';this.style.background='#D0DFFA';this.style.fontWeight='bold'; onmouseout=this.style.color='black';this.style.fontWeight='normal';this.style.background='white';>"+i+"</a></td>";
if(count==5)
{
table=table+"</tr><tr>";
count=1;
}
}
table=table+"</tr>";
table = table + "<tr><th colspan='8' style='padding: 3px;text-align:center'><a href='javascript:hideCalendarControl();' style=color:black;font-weight:bold;text-decoration:none;font-size:8pt;font-family:verdana>Close</a></th></tr>";
table=table+"</table></td></tr></table>";
var calendarId = 'CalendarControl';
var Calendar=document.getElementById(calendarId);
Calendar.innerHTML = table;
Setposition();
}
this.show = show;
function show(field) {
if (dateField == field)
{
return;
}
else
{
dateField = field;
}
if(dateField) {
try {
var dateString = new String(dateField.value);
var dateParts = dateString.split("/");
selectedMonth = parseInt(dateParts[0],10);
selectedDay = parseInt(dateParts[1],10);
selectedYear = parseInt(dateParts[2],10);
} catch(e) {}
}
if (!(selectedYear && selectedMonth && selectedDay)) {
selectedMonth = getCurrentMonth();
selectedDay = getCurrentDay();
selectedYear = getCurrentYear();
}
currentMonth = selectedMonth;
currentDay = selectedDay;
currentYear = selectedYear;
if(document.getElementById){
calendar = document.getElementById(calendarId);
calendar.innerHTML = calendarDrawTable();
Setposition();
}
}
function Setposition()
{
var calendarControlFrame=document.getElementById('CalendarControlIFrame');
calendarControlFrame.style.display="Block";
calendar.style.display="Block";
var fieldPos = new positionInfo(dateField);
var calendarPos = new positionInfo(calendarId);
var x = fieldPos.getElementLeft();
var y = fieldPos.getElementBottom();
x=x+100;
calendarControlFrame.style.position="Absolute";
calendarControlFrame.style.background="white";
calendar.style.position="Absolute";
calendarControlFrame.style.top=y+"px";
calendarControlFrame.style.left=x+"px";
calendar.style.top=y+"px";
calendar.style.left=x+"px";
}
this.hide = hide;
function hide() {
if(dateField) {
setProperty('display', 'none');
setElementProperty('display', 'none', 'CalendarControlIFrame');
dateField = null;
}
}
}
var calendarControl = new CalendarControl();
function showCalendarControl(ControlNo) {
var textField;
if(ControlNo==1)
{
textField=document.getElementById('<%=txtFromDate.ClientID%>');
}
else
{
textField=document.getElementById('<%=txtToDate.ClientID%>');
}
if(ControlNo==3)
{
textField=document.getElementById('ctl00_WorkArea_SwipecardExclusionRequestUC_Swipecardexclusion_ctl13_txtFDate');
}
if(ControlNo==4)
{
textField=document.getElementById('ctl00_WorkArea_SwipecardExclusionRequestUC_Swipecardexclusion_ctl13_txtTDate');
}
calendarControl.show(textField);
}
function hideCalendarControl() {
calendarControl.hide();
}
function setCalendarControlDate(year, month, day) {
calendarControl.setDate(year, month, day);
}
function changeCalendarControlYear(change,M_D_Y)
{
switch(M_D_Y)
{
case 1:
//If year navigated in month Table
var d=new Date();
calendarControl.createMonthTable(change,d.getFullYear(),"month");
break;
case 2:
//If year selected in Month table
calendarControl.CreateYearTable(change,M_D_Y);
break;
case 3:
// If Year selected in yearList
calendarControl.createMonthTable(0,change,"year");
break;
case 4:
//If Year Navigated in Year table
calendarControl.CreateYearTable(change,M_D_Y);
break;
}
}
function changeCalendarControlMonth(change,Month,DateorMonthList)
{
switch(change)
{
case 0:
// for navigating to previous Month in date table
calendarControl.changeMonth(-1,Month,DateorMonthList);
break;
case 1:
// for navigating to next month in date table
calendarControl.changeMonth(1,Month,DateorMonthList);
break;
case 2:
// for displaying Month Table
var d=new Date();
calendarControl.createMonthTable(0,d.getFullYear(),"month");
break;
default:
var d=new Date();
calendarControl.createMonthTable(0,d.getFullYear(),"month");
break;
}
}
document.write("<iframe id='CalendarControlIFrame' style='border:none;display:none;table-layout:fixed;left:100px;position:absolute;top: 0px;height: 170px;width:168px;z-index: 100;' frameBorder='0' scrolling='no'></iframe>");
document.write("<div id='CalendarControl' style='position:absolute;background-color:#FFF; margin:0; padding:0; display:none;z-index: 100;'></div>");
</script>
는 :
<a onclick="showCalendarControl(2)">
<img id="img2" runat="server" alt="Clock" src="../Images/clock_add.png" style="border: none;" /></a>