IE10中的Javascript日期选择器问题

时间:2015-08-05 20:13:20

标签: javascript

与此主题类似:

JavaScript Datepicker issue in IE11 - crossobj.visibility="hidden";

我不得不使用过时的popcalendar.js,这在IE10中无法正常工作。一旦选择了一个日期,就会把" 115"进入日历输入,FF和Chrome放置" 2015"。

我一直试图想出一个解决方案,因为它可能与如何"即"和/或" ns"在代码中设置,但我被卡住了。

非常感谢任何帮助。

谢谢。

代码如下:

//  written by Tan Ling Wee on 2 December 2001

// email:fuushikaden@yahoo.com

var bPageLoaded=false
    var ie=document.all
    var dom=document.getElementById
    var ns4=document.layers
    var crossobj, crossMonthObj, crossYearObj
    var monthSelected, yearSelected, dateSelected
    var omonthSelected, oyearSelected, odateSelected
    var monthConstructed
    var yearConstructed
    var intervalID1, intervalID2
    var timeoutID1, timeoutID2
    var ctlToPlaceValue
    var ctlNow
    var dateFormat
    var today = new Date()
    var dateNow  = today.getDate()
    var monthNow = today.getMonth()
    var yearNow  = today.getYear()
    var nStartingYear

    if (dom)
    {
        document.write ("<div id='calendar' style='position:absolute;visibility:hidden;'><table width=220 style='font-family:arial; font-size:11px; border-width:1; border-style:solid;border-color:#a0a0a0;font-family:arial; font-size:11px}' bgcolor='#ffffff'><tr bgcolor='#333366'><td><table width='218'><tr><td style='padding:2px;font-family:arial; font-size:11px;'><font color='#ffffff'><B><span id='caption'></span></B></font></td><td align=right><a href='javascript:hideCalendar()'><IMG SRC='/mortracstatic/images/registration/close.gif' WIDTH='15' HEIGHT='13' BORDER='0' ALT='Close the Calendar'></a></td></tr></table></td></tr><tr><td style='padding:5px' bgcolor=#ffffff><span id='content'></span></td></tr><tr bgcolor=#f0f0f0><td style='padding:5px' align=center><span id='lblToday'></span></td></tr></table></div><div id='selectMonth' style='position:absolute;visibility:hidden;'></div><div id='selectYear'  style='position:absolute;visibility:hidden;'></div>");
    }

    var monthName = new Array("January","February","March","April","May","June","July","August","September","October","November","December")

    var dayName = new Array ("Sun","Mon","Tue","Wed","Thu","Fri","Sat")

    var styleAnchor="text-decoration:none;color:black;"
    var styleLightBorder="border-style:solid; border-width:1px; border-color:#a0a0a0}"

    var imgsrc = new Array("/mortracstatic/images/registration/drop1.gif","/mortracstatic/images/registration/drop2.gif","/mortracstatic/images/registration/left1.gif","/mortracstatic/images/registration/left2.gif","/mortracstatic/images/registration/right1.gif","/mortracstatic/images/registration/right2.gif");
    var img = new Array();

    function swapImage(srcImg, destImg){
        if (ie) { document.getElementById(srcImg).setAttribute("src",destImg) }
    }

    function init() {

        if (!ns4)
        {
            for (i=0;i<imgsrc.length;i++)
            {
                img[i] = new Image
                img[i].src=imgsrc[i]
            }

            if (!ie) {
                yearNow += 1900
            }

            crossobj=(dom)?document.getElementById("calendar").style : ie? document.all.calendar : document.calendar
            hideCalendar()

            crossMonthObj=(dom)?document.getElementById("selectMonth").style : ie? document.all.selectMonth : document.selectMonth

            crossYearObj=(dom)?document.getElementById("selectYear").style : ie? document.all.selectYear : document.selectYear

            monthConstructed=false;
            yearConstructed=false;

            document.getElementById("lblToday").innerHTML = "Today is <a style='"+styleAnchor+"' href='javascript:monthSelected=monthNow;yearSelected=yearNow;constructCalendar();'>"+dayName[today.getDay()]+", " + dateNow + " " + monthName[monthNow].substring(0,3) + " " + yearNow + "</a>"   

            // decrease by one month

            sHTML1="<span id='spanLeft' style='border-style:solid;border-width:1;border-color:#9D9DCE;cursor:pointer' onmouseover='swapImage(\"changeLeft\",\"/mortracstatic/images/registration/left2.gif\");this.style.borderColor=\"#ddddee\"' onclick='javascript:decMonth()' onmouseout='clearInterval(intervalID1);swapImage(\"changeLeft\",\"/mortracstatic/images/registration/left1.gif\");this.style.borderColor=\"#9d9dce\"' onmousedown='clearTimeout(timeoutID1);timeoutID1=setTimeout(\"StartDecMonth()\",500)' onmouseup='clearTimeout(timeoutID1);clearInterval(intervalID1)'>&nbsp<IMG id='changeLeft' SRC='/mortracstatic/images/registration/left1.gif' BORDER=0>&nbsp</span>&nbsp;"

            // increase by one month

            sHTML1+="<span id='spanRight' style='border-style:solid;border-width:1;border-color:#9d9dce;cursor:pointer' onmouseover='swapImage(\"changeRight\",\"/mortracstatic/images/registration/right2.gif\");this.style.borderColor=\"#ddddee\"' onmouseout='clearInterval(intervalID1);swapImage(\"changeRight\",\"/mortracstatic/images/registration/right1.gif\");this.style.borderColor=\"#9d9dce\"'  onclick='incMonth()' onmousedown='clearTimeout(timeoutID1);timeoutID1=setTimeout(\"StartIncMonth()\",500)' onmouseup='clearTimeout(timeoutID1);clearInterval(intervalID1)'>&nbsp<IMG id='changeRight' SRC='/mortracstatic/images/registration/right1.gif' BORDER=0>&nbsp</span>&nbsp"

            // month pulldown

            sHTML1+="<span id='spanMonth' style='border-style:solid;border-width:1;border-color:#9d9dce;cursor:pointer' onmouseover='swapImage(\"changeMonth\",\"/mortracstatic/images/registration/drop2.gif\");this.style.borderColor=\"#ddddee\"' onmouseout='swapImage(\"changeMonth\",\"/mortracstatic/images/registration/drop1.gif\");this.style.borderColor=\"#9d9dce\"' onclick='popUpMonth()'></span>&nbsp;"

            // year pulldown

            sHTML1+="<span id='spanYear' style='border-style:solid;border-width:1;border-color:#9d9dce;cursor:pointer' onmouseover='swapImage(\"changeYear\",\"/mortracstatic/images/registration/drop2.gif\");this.style.borderColor=\"#ddddee\"' onmouseout='swapImage(\"changeYear\",\"/mortracstatic/images/registration/drop1.gif\");this.style.borderColor=\"#9d9dce\"' onclick='popUpYear()'></span>&nbsp;"

            document.getElementById("caption").innerHTML  = sHTML1

            bPageLoaded=true
        }
    }

    function hideCalendar() {
        crossobj.visibility="hidden"
        if (crossMonthObj != null){crossMonthObj.visibility="hidden"}
        if (crossYearObj != null){crossYearObj.visibility="hidden"}
    }

    function closeCalendar() {
        var sTmp

        var paddedMonth = (monthSelected+1)
        if ((monthSelected+1) < 10)
        {
            paddedMonth = "0" + (monthSelected+1)
        }

        var paddedDay = dateSelected
        if (dateSelected < 10)
        {
            paddedDay = "0" + dateSelected
        }

        hideCalendar();
        sTmp = dateFormat
        dateFormat = dateFormat.replace ("mmm","<n>")
        dateFormat = dateFormat.replace ("mm","<m>")
        dateFormat = dateFormat.replace ("<n>",monthName[monthSelected])
        dateFormat = dateFormat.replace ("<m>",paddedMonth)
        dateFormat = dateFormat.replace ("m",monthSelected+1)
        dateFormat = dateFormat.replace ("dd",paddedDay)
        dateFormat = dateFormat.replace ("d",dateSelected)

        ctlToPlaceValue.value = dateFormat.replace ("yyyy",yearSelected)
        if ( ctlToPlaceValue.onchange != null ) {
            ctlToPlaceValue.onchange();
        }
    }

    /*** Month Pulldown ***/

    function StartDecMonth()
    {
        intervalID1=setInterval("decMonth()",80)
    }

    function StartIncMonth()
    {
        intervalID1=setInterval("incMonth()",80)
    }

    function incMonth () {
        monthSelected++
        if (monthSelected>11) {
            monthSelected=0
            yearSelected++
        }
        constructCalendar()
    }

    function decMonth () {
        monthSelected--
        if (monthSelected<0) {
            monthSelected=11
            yearSelected--
        }
        constructCalendar()
    }

    function constructMonth() {
        popDownYear()
        if (!monthConstructed) {
            sHTML = ""
            for (i=0; i<12; i++) {
                sName = monthName[i];
                if (i==monthSelected){
                    sName = "<B>" + sName + "</B>"
                }
                sHTML += "<tr><td id='m" + i + "' onmouseover='this.style.backgroundColor=\"#9d9dce\"' onmouseout='this.style.backgroundColor=\"\"' style='cursor:pointer' onclick='monthConstructed=false;monthSelected=" + i + ";constructCalendar();popDownMonth();event.cancelBubble=true'>&nbsp;" + sName + "&nbsp;</td></tr>"
            }

            document.getElementById("selectMonth").innerHTML = "<table width=70 style='font-family:arial; font-size:11px; border-width:1; border-style:solid; border-color:#a0a0a0;' bgcolor='#f0f0f0' cellspacing=0 onmouseover='clearTimeout(timeoutID1)' onmouseout='clearTimeout(timeoutID1);timeoutID1=setTimeout(\"popDownMonth()\",100);event.cancelBubble=true'>" + sHTML + "</table>"

            monthConstructed=true
        }
    }

    function popUpMonth() {
        constructMonth()
        crossMonthObj.visibility = (dom||ie)? "visible" : "show"
        crossMonthObj.left = parseInt(crossobj.left) + 50
        crossMonthObj.top = parseInt(crossobj.top) + 26
    }

    function popDownMonth() {
        crossMonthObj.visibility= "hidden"
    }

    /*** Year Pulldown ***/

    function incYear() {
        for (i=0; i<7; i++){
            newYear = (i+nStartingYear)+1
            if (newYear==yearSelected)
            { txtYear = "&nbsp;<B>" + newYear + "</B>&nbsp;" }
            else
            { txtYear = "&nbsp;" + newYear + "&nbsp;" }
            document.getElementById("y"+i).innerHTML = txtYear
        }
        nStartingYear ++;
    }

    function decYear() {
        for (i=0; i<7; i++){
            newYear = (i+nStartingYear)-1
            if (newYear==yearSelected)
            { txtYear = "&nbsp;<B>" + newYear + "</B>&nbsp;" }
            else
            { txtYear = "&nbsp;" + newYear + "&nbsp;" }
            document.getElementById("y"+i).innerHTML = txtYear
        }
        nStartingYear --;
    }

    function selectYear(nYear) {
        yearSelected=parseInt(nYear+nStartingYear);
        yearConstructed=false;
        constructCalendar();
        popDownYear();
    }

    function constructYear() {
        popDownMonth()
        sHTML = ""
        if (!yearConstructed) {

            sHTML = "<tr><td align='center' onmouseover='this.style.backgroundColor=\"#9d9dce\"' onmouseout='clearInterval(intervalID1);this.style.backgroundColor=\"\"' style='cursor:pointer' onmousedown='clearInterval(intervalID1);intervalID1=setInterval(\"decYear()\",30)' onmouseup='clearInterval(intervalID1)'>-</td></tr>"

            j = 0
            nStartingYear = yearSelected-3
            for (i=(yearSelected-3); i<=(yearSelected+3); i++) {
                sName = i;
                if (i==yearSelected){
                    sName = "<B>" + sName + "</B>"
                }
                sHTML += "<tr><td id='y" + j + "' onmouseover='this.style.backgroundColor=\"#9d9dce\"' onmouseout='this.style.backgroundColor=\"\"' style='cursor:pointer' onclick='selectYear("+j+");event.cancelBubble=true'>&nbsp;" + sName + "&nbsp;</td></tr>"
                j ++;
            }

            sHTML += "<tr><td align='center' onmouseover='this.style.backgroundColor=\"#9d9dce\"' onmouseout='clearInterval(intervalID2);this.style.backgroundColor=\"\"' style='cursor:pointer' onmousedown='clearInterval(intervalID2);intervalID2=setInterval(\"incYear()\",30)' onmouseup='clearInterval(intervalID2)'>+</td></tr>"

            document.getElementById("selectYear").innerHTML = "<table width=44 style='font-family:arial; font-size:11px; border-width:1; border-style:solid; border-color:#a0a0a0;' bgcolor='#f0f0f0' onmouseover='clearTimeout(timeoutID2)' onmouseout='clearTimeout(timeoutID2);timeoutID2=setTimeout(\"popDownYear()\",100)' cellspacing=0>" + sHTML + "</table>"

            yearConstructed = true
        }
    }

    function popDownYear() {
        clearInterval(intervalID1)
        clearTimeout(timeoutID1)
        clearInterval(intervalID2)
        clearTimeout(timeoutID2)
        crossYearObj.visibility= "hidden"
    }

    function popUpYear() {
        var leftOffset

        constructYear()
        crossYearObj.visibility = (dom||ie)? "visible" : "show"
        leftOffset = parseInt(crossobj.left) + document.getElementById("spanYear").offsetLeft 
        if (ie)
        {
            leftOffset += 6
        }
        crossYearObj.left = leftOffset
        crossYearObj.top = parseInt(crossobj.top) + 26
    }

    /*** calendar ***/

    function constructCalendar () {
        var startDate = new Date (yearSelected,monthSelected,1)
        var endDate = new Date (yearSelected,monthSelected+1,1);
        endDate = new Date (endDate - (24*60*60*1000));
        numDaysInMonth = endDate.getDate()

        datePointer = 0
        dayPointer = startDate.getDay()

        sHTML = "<table style='font-family:verdana; font-size:10px;'><tr>"

        for (i=0; i<7; i++) {
            sHTML += "<td width='27' align='right'><B>"+ dayName[i]+"</B></td>"
        }
        sHTML +="</tr>"

        for ( var i=1 ; i<=dayPointer ; i++ )
        {
            sHTML += "<td>&nbsp;</td>"
        }

        for ( datePointer=1 ; datePointer<=numDaysInMonth; datePointer++ )
        {
            dayPointer++;
            sHTML += "<td align=right>"
            if ((datePointer==odateSelected) && (monthSelected==omonthSelected) && (yearSelected==oyearSelected))
            {
                if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow))
                {
                    sHTML += "<b><a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'><font color=#990000>&nbsp;" + datePointer + "</font>&nbsp;</a></b>"
                }
                else if (dayPointer % 7 == 1 )
                {
                    sHTML += "<font color=#909090><a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'>&nbsp;" + datePointer + "&nbsp;</a>"
                }
                else
                {
                    sHTML += "<a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'>&nbsp;" + datePointer + "&nbsp;</a>"
                }
            }
            else
            {
                if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow))
                {
                    sHTML += "<b><a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'><font color=#990000>&nbsp;" + datePointer + "</font>&nbsp;</a></b>"
                }
                else if (dayPointer % 7 == 1 )
                {
                    sHTML += "<font color=#909090><a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'>&nbsp;" + datePointer + "&nbsp;</a>"
                }
                else
                {
                    sHTML += "<a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'>&nbsp;" + datePointer + "&nbsp;</a>"
                }
            }


            sHTML += ""
            if (dayPointer % 7 == 0)
            {
                sHTML += "</tr><tr>"
            }
            sHTML += "</td>"
        }

        document.getElementById("content").innerHTML   = sHTML
        document.getElementById("spanMonth").innerHTML = "&nbsp;" + monthName[monthSelected] + "&nbsp;<IMG id='changeMonth' SRC='/mortracstatic/images/registration/drop1.gif' WIDTH='12' HEIGHT='10' BORDER=0>"
        document.getElementById("spanYear").innerHTML = "&nbsp;" + yearSelected + "&nbsp;<IMG id='changeYear' SRC='/mortracstatic/images/registration/drop1.gif' WIDTH='12' HEIGHT='10' BORDER=0>"
    }

    function popUpCalendar(ctl, ctl2, format) {

        var leftpos=0
        var toppos=0

        if (bPageLoaded)
        {
            if ( crossobj.visibility == "hidden" ) {
                ctlToPlaceValue = ctl2
                dateFormat=format;

                formatChar = " "
                aFormat = dateFormat.split(formatChar)
                if (aFormat.length<3)
                {
                    formatChar = "/"
                    aFormat = dateFormat.split(formatChar)
                    if (aFormat.length<3)
                    {
                        formatChar = "-"
                        aFormat = dateFormat.split(formatChar)
                        if (aFormat.length<3)
                        {
                            // invalid date format
                            formatChar=""
                        }
                    }           
                }

                tokensChanged = 0
                if ( formatChar != "" )
                {
                    // use user's date
                    aData = ctl2.value.split(formatChar)
                    for (i=0;i<3;i++)
                    {
                        if (aFormat[i]=="d")
                        {
                            dateSelected = parseInt(aData[i])
                            tokensChanged ++
                        }
                        else if (aFormat[i]=="m")
                        {
                            monthSelected = parseInt(aData[i]) - 1
                            tokensChanged ++
                        }
                        else if (aFormat[i]=="yyyy")
                        {
                            yearSelected = parseInt(aData[i])
                            tokensChanged ++
                        }
                        else if (aFormat[i]=="mmm")
                        {
                            for (j=0; j<12; j++)
                            {   
                                if (aData[i]==monthName[j])
                                {
                                    monthSelected=j
                                    tokensChanged ++
                                }
                            }
                        }
                    }
                }

                if ((tokensChanged!=3)||isNaN(dateSelected)||isNaN(monthSelected)||isNaN(yearSelected))
                {
                    dateSelected = dateNow
                    monthSelected = monthNow
                    yearSelected = yearNow
                }

                odateSelected=dateSelected
                omonthSelected=monthSelected
                oyearSelected=yearSelected

                aTag = ctl
                do {
                    aTag = aTag.offsetParent;
                    leftpos += aTag.offsetLeft;
                    toppos += aTag.offsetTop;
                } while(aTag.tagName!="BODY");

                crossobj.left = ctl.offsetLeft + leftpos
                crossobj.top = ctl.offsetTop + toppos + ctl.offsetHeight + 2
                constructCalendar (1, monthSelected, yearSelected);
                crossobj.visibility=(dom||ie)? "visible" : "show"
            }
            else
            {
                hideCalendar()
                if (ctlNow!=ctl) {
                    popUpCalendar(ctl, ctl2, format)
                }
            }
            ctlNow = ctl
        }
    }

window.onload=init

2 个答案:

答案 0 :(得分:1)

一些应该重写的相当糟糕的代码,但是你可以修补它。你的问题在这里:

if (!ie) {
  yearNow += 1900
}

使用:

if (yearNow < 1000) {
  yearNow += 1900
}

它源于使用 getYear 而不是 getFullYear

var yearNow  = today.getYear()

但我不确定更改为 getFullYear 会对其他代码产生什么影响。 另一种方法是添加以下内容;

var ie=document.all
var dom=document.getElementById
var ns4=document.layers

// Add this:
var undefined;
if (dom) ie = ns4 = undefined;

当然未经测试。 ; - )

它可能在夏令时边界之间存在问题,因为它会以一种方式跳过一天:

   endDate = new Date (endDate - (24*60*60*1000));

测试并了解它是如何进行的。

答案 1 :(得分:0)

请确保日历不使用IE10不支持的“let”和“const”javascript关键字。