与此主题类似:
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)'> <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
答案 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关键字。