Javascript Date Picker Issues in IE10

Question

Similar to this thread:

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

I'm stuck with having to use an outdated popcalendar.js, which does not work correctly in IE10. Once a date is picked, it puts "115" into the calendar input, where FF and Chrome put "2015".

I've been trying to come up with a solution, as it likely has something to do with how "ie" and/or "ns" is set within the code, but I'm stuck.

Any help would be greatly appreciated.

Thank you.

Code as follows:

//  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 (" 
");
    }

    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"+dayName[today.getDay()]+", " + dateNow + " " + monthName[monthNow].substring(0,3) + " " + yearNow + ""   

            // decrease by one month

            sHTML1="   "

            // increase by one month

            sHTML1+="   "

            // month pulldown

            sHTML1+=" "

            // year pulldown

            sHTML1+=" "

            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","")
        dateFormat = dateFormat.replace ("mm","")
        dateFormat = dateFormat.replace ("",monthName[monthSelected])
        dateFormat = dateFormat.replace ("",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 = "" + sName + ""
                }
                sHTML += " " + sName + " "
            }

            document.getElementById("selectMonth").innerHTML = "" + sHTML + ""

            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 = " " + newYear + " " }
            else
            { txtYear = " " + newYear + " " }
            document.getElementById("y"+i).innerHTML = txtYear
        }
        nStartingYear ++;
    }

    function decYear() {
        for (i=0; i<7; i++){
            newYear = (i+nStartingYear)-1
            if (newYear==yearSelected)
            { txtYear = " " + newYear + " " }
            else
            { txtYear = " " + newYear + " " }
            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 = "-"

            j = 0
            nStartingYear = yearSelected-3
            for (i=(yearSelected-3); i<=(yearSelected+3); i++) {
                sName = i;
                if (i==yearSelected){
                    sName = "" + sName + ""
                }
                sHTML += " " + sName + " "
                j ++;
            }

            sHTML += "+"

            document.getElementById("selectYear").innerHTML = "" + sHTML + ""

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

        for (i=0; i<7; i++) {
            sHTML += ""
        }
        sHTML +=""

        for ( var i=1 ; i<=dayPointer ; i++ )
        {
            sHTML += ""
        }

        for ( datePointer=1 ; datePointer<=numDaysInMonth; datePointer++ )
        {
            dayPointer++;
            sHTML += ""
            }
            sHTML += ""
        }

        document.getElementById("content").innerHTML   = sHTML
        document.getElementById("spanMonth").innerHTML = " " + monthName[monthSelected] + " "
        document.getElementById("spanYear").innerHTML = " " + yearSelected + " "
    }

    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
"+ dayName[i]+"
  "
            if ((datePointer==odateSelected) && (monthSelected==omonthSelected) && (yearSelected==oyearSelected))
            {
                if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow))
                {
                    sHTML += " " + datePointer + " "
                }
                else if (dayPointer % 7 == 1 )
                {
                    sHTML += " " + datePointer + " "
                }
                else
                {
                    sHTML += " " + datePointer + " "
                }
            }
            else
            {
                if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow))
                {
                    sHTML += " " + datePointer + " "
                }
                else if (dayPointer % 7 == 1 )
                {
                    sHTML += " " + datePointer + " "
                }
                else
                {
                    sHTML += " " + datePointer + " "
                }
            }


            sHTML += ""
            if (dayPointer % 7 == 0)
            {
                sHTML += "

RobG · Accepted Answer

Some fairly awful code that should be rewritten, however you can patch it. Your problem is here:

if (!ie) {
  yearNow += 1900
}

use:

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

It stems from the use of getYear rather than getFullYear:

var yearNow  = today.getYear()

but I'm not sure what effect changing to getFullYear will have on other code. An alternative is to add the following;

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

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

Untested of course. ;-)

It may also have issues across daylight saving boundaries where it will skip a day one way or the other because of:

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

Test and see how it goes.

Javascript Date Picker Issues in IE10

Answers (2)

Related Questions