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 ("<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)'> <IMG id='changeLeft' SRC='/mortracstatic/images/registration/left1.gif' BORDER=0> </span> "
// 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)'> <IMG id='changeRight' SRC='/mortracstatic/images/registration/right1.gif' BORDER=0> </span> "
// 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> "
// 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> "
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'> " + sName + " </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 = " <B>" + newYear + "</B> " }
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 = " <B>" + newYear + "</B> " }
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 = "<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'> " + sName + " </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> </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> " + datePointer + "</font> </a></b>"
}
else if (dayPointer % 7 == 1 )
{
sHTML += "<font color=#909090><a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'> " + datePointer + " </a>"
}
else
{
sHTML += "<a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'> " + datePointer + " </a>"
}
}
else
{
if ((datePointer==dateNow)&&(monthSelected==monthNow)&&(yearSelected==yearNow))
{
sHTML += "<b><a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'><font color=#990000> " + datePointer + "</font> </a></b>"
}
else if (dayPointer % 7 == 1 )
{
sHTML += "<font color=#909090><a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'> " + datePointer + " </a>"
}
else
{
sHTML += "<a style='"+styleAnchor+"' href='javascript:dateSelected="+datePointer + ";closeCalendar();'> " + datePointer + " </a>"
}
}
sHTML += ""
if (dayPointer % 7 == 0)
{
sHTML += "</tr><tr>"
}
sHTML += "</td>"
}
document.getElementById("content").innerHTML = sHTML
document.getElementById("spanMonth").innerHTML = " " + monthName[monthSelected] + " <IMG id='changeMonth' SRC='/mortracstatic/images/registration/drop1.gif' WIDTH='12' HEIGHT='10' BORDER=0>"
document.getElementById("spanYear").innerHTML = " " + yearSelected + " <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 answers
solution1
1 ACCPTED 2015-08-05 21:10:54
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.
solution2
0 2017-03-15 08:15:26
请确保日历未使用IE10不支持的“ let”和“ const” javascript关键字。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Date picker in ng-grid is not working with IE10
Having issues getting JavaScript onClientClick event working in IE10
Javascript not working in IE10
Javascript dataset for IE10
Date Picker automatically popping up when page is open only in IE10
Issues with AngularJS and IE10 routing.
Windows Phone 8 IE10 Javascript debugging
Javascript Regex replace not working in IE10
Force IE10 to ignore javascript
JavaScript browser detection in IE10
Related Tags