風聲日期時間選擇器的一些小小的使用心得

 風聲作品日期時間選擇器非常好用,但在使用過程中發現一些小問題。

原作品地址爲:http://www.fonshen.com/dispbbs.asp?boardID=2&ID=1&page=1

在此再帖一下:

test.html內容如下:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>風聲日期和時間選擇器</title>
<script language="javascript" src="selectTime.js"></script>
</head>

<body>
<pre>
/*/////////////////////////////////////////////////////////////////
函數說明:風聲日期和時間選擇器,整個功能只有一個函數調用極其方便
功能說明:年份根據輸入(當前)日期前後5年自動選擇,1000--9000年設定
作  者:風聲
電子郵件:[email protected]    
函數原型:
function selectTime(thisIdName[,mode])
參數說明:
    thisIdName:接受返回值的對象ID名稱
    mode:        返回值類型
        0:默認值,返回yyyy-mm-dd hh-mm-ss
        1:返回yyyy-mm-dd
        2:返回hh-mm-ss
        3:返回mm-dd
        4:返回hh-mm
        5:返回yyyy-mm-dd hh-mm
修正時間:2005-11-29
時  間:2004-5-26
////////////////////////////////////////////////////////////////*/
</pre>
<input type="text" value="2003-3-12 12:12:12" name="aa">
<br>
<input type="button" value="選擇mode=0" onclick="selectTime('aa',0)">
<input name="button" type="button" onclick="selectTime('aa',1)" value="選擇mode=1">
<input name="button2" type="button" onclick="selectTime('aa',2)" value="選擇mode=2">
<input name="button3" type="button" onclick="selectTime('aa',3)" value="選擇mode=3">
<input name="button4" type="button" onclick="selectTime('aa',4)" value="選擇mode=4">
<input name="button42" type="button" onclick="selectTime('aa',5)" value="選擇mode=5">
</body>
</html>

selectTime.js內容如下:

 

/*/////////////////////////////////////////////////////////////////
函數說明:風聲日期和時間選擇器,整個功能只有一個函數調用極其方便
作  者:風聲
電子郵件:[email protected]    
函數原型:
function selectTime(thisIdName[,mode])
參數說明:
    thisIdName:接受返回值的對象ID名稱
    mode:        返回值類型
        0:默認值,返回yyyy-mm-dd hh-mm-ss
        1:返回yyyy-mm-dd
        2:返回hh-mm-ss
        3:返回mm-dd
        4:返回hh-mm
        5:返回yyyy-mm-dd hh-mm
修正時間:2005-11-29
時  間:2004-5-26
////////////////////////////////////////////////////////////////
*/

function timeFormat(i){return((i<10)?"0"+i.toString():i.toString());}
function selectTime(thisName){
var argv=selectTime.arguments;
var argc=selectTime.arguments.length;
var mode=(argc>1)?argv[1]:0;
try{
    
var strTime=document.getElementById(thisName).value;
    strTime
=strTime.replace(/[-:]/g," ");
}
catch(e){
    
return false;
}

var dateNow    = new Date();
var intYear    = dateNow.getYear();
var intMonth    = dateNow.getMonth();
var intDate    = dateNow.getDate();
var intHour    = dateNow.getHours();
var intMinute    = dateNow.getMinutes();
var intSecond    = dateNow.getSeconds();
switch(mode){
    
case 0:break;
    
case 1:break;
    
case 2:strTime=intYear+" "+(intMonth+1)+" "+intDay+" "+strTime;break;
    
case 3:strTime=intYear+" "+strTime;break;
    
case 4:strTime=intYear+" "+(intMonth+1)+" "+intDay+" "+strTime;break;
    
case 5:break;
}

var arrTime=strTime.split(" ");

var i=0;
//----年
if(!isNaN(arrTime[0])){
    i
=parseInt(arrTime[0],10);
    
    
if(i>1000&&i<9000)intYear=i;
}

//----月
if(!isNaN(arrTime[1])){
    i
=parseInt(arrTime[1],10);
    
if(i>0&&i<13)intMonth=i-1;
}

//----日曆開始
var dateFirst=new Date(intYear,intMonth,1);
var intDay=dateFirst.getDay();
//----日曆結束
var arrDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
arrDays[
1]+=!(intYear%4);
var intDays=arrDays[intMonth];
//----日
if(!isNaN(arrTime[2])){
    i
=parseInt(arrTime[2],10);
    
if(i>0&&i<=intDays)intDate=i;
}

//----時
if(!isNaN(arrTime[3])){
    i
=parseInt(arrTime[3],10);
    
if(i>=0&&i<24)intHour=i;
}

//----分
if(!isNaN(arrTime[4])){
    i
=parseInt(arrTime[4],10);
    
if(i>=0&&i<60)intMinute=i;
}

//----秒
if(!isNaN(arrTime[5])){
    i
=parseInt(arrTime[5],10);
    
if(i>=0&&i<60)intSecond=i;
}


var myWindow    = window.open("","selectTime","height=304,width=404");
var arrMonth=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");

var strHTML="";
strHTML
+="<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312">";
strHTML
+="<title>選擇日期和時間</title><style type="text/css"><!-- ";
strHTML
+="table {font-size: 12px;}";
strHTML
+=".f8 {    font-size: 7px;}";
strHTML
+=".myinput {text-align: center;width: 20px;border: 0px;height: 16px;vertical-align: baseline;}";
strHTML
+=".boxIn {border-top: 2px solid #423E3B;border-right: 1px solid #FFFCF5;border-bottom: 1px solid #FFFCF5;border-left: 2px solid #423E3B;background: #FFFFFF;}";
strHTML
+=".myButton {height: 10px;width: 25px;font-size: 4px;}";
strHTML
+=" --></style>";
strHTML
+="<script language="JavaScript">";
//----函數
strHTML+="var day="+intDate+";";
strHTML
+="var strTemp="",intTemp=0;";
strHTML
+="function onTimeKeyUp(obj,num,maxnum,next){";
strHTML
+="var strTemp=obj.value;";    
strHTML
+="if(isNaN(strTemp))obj.value=strTemp.substring(0,strTemp.length-1);";
strHTML
+="else{var intTemp=parseInt(strTemp,10);";
strHTML
+="if(intTemp>maxnum)obj.value=strTemp.substring(0,strTemp.length-1);";
strHTML
+="else if(intTemp>num){next.focus();}";
strHTML
+="}}";
strHTML
+="function setCalendar(intYear,intMonth,intDate){";
strHTML
+="var dateFirst=new Date(intYear,intMonth,1);";
strHTML
+="var intDay=dateFirst.getDay();";
strHTML
+="var arrDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);";
strHTML
+="arrDays[1]+=!(intYear%4);";
strHTML
+="var intDays=arrDays[intMonth],str="";";
strHTML
+="if(intDate>intDays)intDate=intDays;";
strHTML
+="intDay--;";
strHTML
+="for(var i=0;i<42;i++){";
strHTML
+="if(i<=intDay)date[i].innerHTML="";";
strHTML
+="else if(i<=intDays+intDay){str=i-intDay;if(str<10)str="&nbsp;"+str;";
strHTML
+="if(i-intDay==intDate){strTemp=str;";
strHTML
+="str="<font color='#FFFFFF' style='background:#0A246A'>"+str+"</font>";";
strHTML
+="intTemp=i;day=intDate;}";
strHTML
+="date[i].innerHTML=str;}";
strHTML
+="else date[i].innerHTML="";";
strHTML
+="}}";
strHTML
+="function setNewDate(num){"
strHTML
+="var str=date[num].innerHTML;";
strHTML
+="var i=str.length;";
strHTML
+="if(i>1&&i<8){";
strHTML
+="date[intTemp].innerHTML=strTemp;intTemp=num;strTemp=str;";
strHTML
+="date[num].innerHTML="<font color='#FFFFFF' style='background:#0A246A'>"+strTemp+"</font>";";
strHTML
+="if(i>2)str=str.substr(i-1);day=parseInt(str,10);}}";
strHTML
+="function isOk(){";
switch(mode){
case 0:strHTML+="window.opener.document.getElementById(""+thisName+"").value=year.value+"-"+(parseInt(month.value,10)+1)+"-"+day+" "+hour.value+":"+minute.value+":"+second.value;";break;
case 1:strHTML+="window.opener.document.getElementById(""+thisName+"").value=year.value+"-"+(parseInt(month.value,10)+1)+"-"+day;";break;
case 2:strHTML+="window.opener.document.getElementById(""+thisName+"").value=hour.value+":"+minute.value+":"+second.value;";break;
case 3:strHTML+="window.opener.document.getElementById(""+thisName+"").value=(parseInt(month.value,10)+1)+"-"+day;";break;
case 4:strHTML+="window.opener.document.getElementById(""+thisName+"").value=hour.value+":"+minute.value;";break;
case 5:strHTML+="window.opener.document.getElementById(""+thisName+"").value=year.value+"-"+(parseInt(month.value,10)+1)+"-"+day+" "+hour.value+":"+minute.value;";break;
}

strHTML
+="window.close();}";
strHTML
+="function timeFormat(i){return((i<10)?'0'+i.toString():i.toString());}";
strHTML
+="function timeAdd(obj0){var i=parseInt(obj.value,10);obj.value=timeFormat((i<intMax)?i+1:0);obj.select();obj0.focus();}";
strHTML
+="function timeRid(obj0){var i=parseInt(obj.value,10);obj.value=timeFormat((i>0)?i-1:intMax);obj.select();obj0.focus();}";
strHTML
+="</script>";
strHTML
+="</head>";

strHTML
+="<body bgcolor="#D4CFC9" style="border:0;margin:5" οncοntextmenu="return(false)">";
strHTML
+="<table width="394" border="0" align="center" cellpadding="0" cellspacing="0">";
strHTML
+="<tr>";
strHTML
+="<td height="24" align="center" style="border-left:1px solid #FFFCF5;border-top:1px solid #FFFCF5">日期和時間</td>";
strHTML
+="<td colspan="2" style="border-left:2px solid #423E3B;border-bottom:1px solid #FFFCF5">&nbsp;</td>";
strHTML
+="</tr><tr> ";
strHTML
+="<td height="200" colspan="2" align="center" style="border-left:1px solid #FFFCF5;margin:5px;">";
strHTML
+="<fieldset style="width:190;height:190"><legend>日期(D)</legend>";
strHTML
+="<select name="month" id="month" style="width:82" onChange="setCalendar(year.value,month.value,day)">";
//----月
for(i=0;i<12;i++){
    strHTML
+="<option value=""+i+""";
    
if(i==intMonth)strHTML+=" selected";
    strHTML
+=">"+arrMonth[i]+"</option>";
}

strHTML
+="</select> ";
strHTML
+="<select name="year" id="year" style="width:82" onChange="setCalendar(year.value,month.value,day)">";
//----年
for(i=intYear-5;i<intYear+5;i++){
    strHTML
+="<option value=""+i+""";
    
if(i==intYear)strHTML+=" selected";
    strHTML
+=">"+i+"年</option>";
}

strHTML
+="</select>";
strHTML
+="<div class="f8">&nbsp;</div>";
strHTML
+="<table width="168" height="133" border="0" cellpadding="2" cellspacing="0" class="boxIn" style="cursor:default">";
strHTML
+="<tr align="center" bgcolor="#999999">";
strHTML
+="<td width=24 height=19>日</td><td width=24>一</td><td width=24>二</td><td width=24>三</td><td width=24>四</td><td width=24>五</td><td width=24>六</td>";
//----日
for(i=0;i<42;i++){
    
if(i%7==0)strHTML+="</tr><tr align="center">";
    strHTML
+="<td id="date" height=19 οnclick="setNewDate("+i+")">&nbsp;</td>";
}

strHTML
+="</tr></table></fieldset></td>";
strHTML
+="<td align="center" style="border-right:2px solid #423E3B;margin:5px;">";
strHTML
+="<fieldset style="width:170;height:190"><legend>時間(T)</legend>";
strHTML
+="<div style="height:142">&nbsp;</div>";
strHTML
+="<table width="150" border="0" cellspacing="2" cellpadding="0"><tr>";
strHTML
+="<td width="125" align="right" class="boxIn">";
//----時
strHTML+="<input name="hour" type="text" class="myinput" id="hour" onBlur="if(this.value=='')this.value='00';" onFocus="this.select();obj=this;intMax=23" value=""+timeFormat(intHour)+"" maxlength="2" οnkeyup="onTimeKeyUp(this,2,23,minute)">:";
//----分
strHTML+="<input name="minute" type="text" class="myinput" id="minute" onBlur="if(this.value=='')this.value='00';" onFocus="this.select();obj=this;intMax=59" value=""+timeFormat(intMinute)+"" maxlength="2" οnkeyup="onTimeKeyUp(this,5,59,second)">:";
//----秒
strHTML+="<input name="second" type="text" class="myinput" id="second" onBlur="if(this.value=='')this.value='00';" onFocus="this.select();obj=this;intMax=59" value=""+timeFormat(intSecond)+"" maxlength="2" οnkeyup="onTimeKeyUp(this,59,59,null)">";
strHTML
+="</td>";
strHTML
+="<td width="25"><input name="Submit" type="button" class="myButton" value="◆" onClick="timeAdd(this)">";
strHTML
+="<input name="Submit4" type="button" class="myButton" value="◆" onClick="timeRid(this)"></td>";
strHTML
+="</tr></table></fieldset></td>";
strHTML
+="</tr><tr> ";
strHTML
+="<td height="40" colspan="3" style="border-left:1px solid #FFFCF5;border-right:2px solid #423E3B;border-bottom:2px solid #423E3B;margin:5px;">";
strHTML
+=" Rumor Date And Time Selector<br><br>";
strHTML
+="</td></tr><tr>";
strHTML
+="<td width="80" height="8"></td>";
strHTML
+="<td width="127" align="right"></td>";
strHTML
+="<td width="187" align="right"></td>";
strHTML
+="</tr><tr><td>&nbsp;</td>";
strHTML
+="<td colspan="2" align="right">";
strHTML
+="<input type="button" name="Submit1" value=" 確定 " οnclick="isOk()"> ";
strHTML
+="<input type="button" name="Submit2" value=" 取消 " οnclick="window.close()"> ";
strHTML
+="<input type="button" name="Submit3" value=" 應用 " disabled></td>";
strHTML
+="</tr></table></body></html>";
strHTML
+="<script language="javascript">var obj=document.getElementById("hour"),intMax=23;";
strHTML
+="setCalendar("+intYear+","+intMonth+","+intDate+");</script>";
myWindow.document.write(strHTML);
myWindow.document.close();
}

 

以上代碼在任何一個.html的頁面中執行都很正常,但是當你將代碼放到.aspx的文件中運行後,卻總是報javascript錯誤,着實讓我鬱悶了一下午。後經反覆實驗及高人提醒,才明白需要對selectTime.js文件做編碼轉換才能在.aspx的頁面中使用。編碼轉換方法爲:在visual studio 2003中打開selectTime.js文件,選擇“文件”-》“另存爲”-》點保存旁邊的小三角,選擇“編碼保存”,在彈出的提示框中選擇編碼類型,注意一定要選擇“Unicode- 代碼頁 1200”,其他編碼方式都不能解決此問題。

這樣問題就解決啦。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章