JavaScript日历日期选择器在ie9中不工作

JavaScript Calendar Datepicker not working in IE 9

本文关键字:工作 ie9 日历 日期 选择器 JavaScript      更新时间:2023-09-26

实际上我使用这个JavaScript日历日期选择器。它在Mozilla Firefox和Chrome中运行良好。在ie9的情况下,它第一次工作,在这个页面,如果任何服务器端事件发生。这是行不通的。我不知道是什么原因。

<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>

在我的ascx文件:

<a onclick="showCalendarControl(2)">
                            <img id="img2" runat="server" alt="Clock" src="../Images/clock_add.png" style="border: none;" /></a>

可以使用jquery日期选择器。它很现代,很容易使用。