IE10中的Javascript日期选择器问题
[英]Javascript Date Picker Issues in IE10
问题描述
与此线程类似：
IE11中的JavaScript Datepicker问题-crossobj.visibility =“ hidden”;
我不得不使用过时的popcalendar.js，它在IE10中无法正常工作。 选择日期后，它将在日历输入中添加“ 115”，而在FF和Chrome浏览器中将其输入“ 2015”。
我一直在尝试提出一个解决方案，因为它可能与在代码中设置“ ie”和/或“ ns”有关，但是我被困住了。
任何帮助将不胜感激。
谢谢。
代码如下：
// written by Tan Ling Wee on 2 December 2001
//电子邮件：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 个解决方案
解决方案1
1 已采纳 2015-08-05 21:10:54
一些相当糟糕的代码应该重写，但是您可以对其进行修补。 您的问题在这里：
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));
测试并查看进展情况。
解决方案2
0 2017-03-15 08:15:26
请确保日历未使用IE10不支持的“ let”和“ const” javascript关键字。
使JavaScript onClientClick事件在IE10中运行时遇到问题
[英]Having issues getting JavaScript onClientClick event working in IE10
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.