一個寫得較好的JavaScript日期挑選控件_時間日期

來源：懂視網責編：小采時間：2020-11-27 20:42:11

一個寫得較好的JavaScript日期挑選控件_時間日期

一個寫得較好的JavaScript日期挑選控件_時間日期:由于是在網絡上無意間找到的一個例程，所以不知道原作者，在此還請原作者見諒！完整源代碼如下：直接用的JS日期控件 '); strFrame=''; strFrame+='INPUT.button{BORDER-RIGHT: #63A3E9 1px solid;BORDER-TOP: #63A3E9

推薦度：

點擊下載本文 文檔為doc格式

導讀一個寫得較好的JavaScript日期挑選控件_時間日期:由于是在網絡上無意間找到的一個例程，所以不知道原作者，在此還請原作者見諒！完整源代碼如下：直接用的JS日期控件 '); strFrame=''; strFrame+='INPUT.button{BORDER-RIGHT: #63A3E9 1px solid;BORDER-TOP: #63A3E9

由于是在網絡上無意間找到的一個例程，所以不知道原作者，在此還請原作者見諒！
完整源代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>直接用的JS日期控件</title> 
</pre>輸出改成你想要的格式 
} 
else 
{ 
outObject.value= parent.meizzTheYear + "-" + format( parent.meizzTheMonth) + "-" + 
format(parent.meizzTheDate); //注：在這里你可以</script></pre>輸出改成你想要的格式 
} 
} 
closeLayer(); 
} 
function meizzPrevM() //往前翻月份 
{ 
if(meizzTheMonth>1){meizzTheMonth--}else{meizzTheYear--;meizzTheMonth=12;} 
meizzSetDay(meizzTheYear,meizzTheMonth); 
} 
function meizzNextM() //往后翻月份 
{ 
if(meizzTheMonth==12){meizzTheYear++;meizzTheMonth=1}else{meizzTheMonth++} 
meizzSetDay(meizzTheYear,meizzTheMonth); 
} 
// TODO: 整理代碼 
function meizzSetDay(yy,mm) //主要的寫程序********** 
{ 
meizzWriteHead(yy,mm); 
//設置當前年月的公共變量為傳入值 
meizzTheYear=yy; 
meizzTheMonth=mm; 
for (var i = 0; i < 37; i++){meizzWDay[i]=""}; //將顯示框的內容全部清空 
var day1 = 1,day2=1,firstday = new Date(yy,mm-1,1).getDay(); //某月第一天的星期幾 
for (i=0;i<firstday;i++)meizzWDay[i]=GetMonthCount(mm==1?yy-1:yy,mm==1?12:mm-1)-firstday+i+1 //上個月的最后幾天 
for (i = firstday; day1 < GetMonthCount(yy,mm)+1; i++) { meizzWDay[i]=day1;day1++; } 
for (i=firstday+GetMonthCount(yy,mm);i<37;i++) { meizzWDay[i]=day2;day2++; } 
for (i = 0; i < 37; i++) 
{ 
var da = eval("odatelayer.meizzDay"+i) //書寫新的一個月的日期星期排列 
if (meizzWDay[i]!="") 
{ 
//初始化邊框 
da.borderColorLight="#63A3E9"; 
da.borderColorDark="#63A3E9"; 
da.style.color="#1478eb"; 
if(i<firstday) //上個月的部分 
{ 
da.innerHTML="<b><font color=#BCBABC>" + meizzWDay[i] + "</font></b>"; 
da.title=(mm==1?12:mm-1) +"月" + meizzWDay[i] + "日"; 
da.onclick=Function("meizzDayClick(this.innerText,-1)"); 
if(!outDate) 
da.style.backgroundColor = ((mm==1?yy-1:yy) == new Date().getFullYear() && 
(mm==1?12:mm-1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ? 
"#5CEFA0":"#f5f5f5"; 
else 
{ 
da.style.backgroundColor =((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && 
meizzWDay[i]==outDate.getDate())? "#84C1FF" : 
(((mm==1?yy-1:yy) == new Date().getFullYear() && (mm==1?12:mm-1) == new Date().getMonth()+1 && 
meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5"); 
//將選中的日期顯示為凹下去 
if((mm==1?yy-1:yy)==outDate.getFullYear() && (mm==1?12:mm-1)== outDate.getMonth() + 1 && 
meizzWDay[i]==outDate.getDate()) 
{ 
da.borderColorLight="#FFFFFF"; 
da.borderColorDark="#63A3E9"; 
} 
} 
} 
else if (i>=firstday+GetMonthCount(yy,mm)) //下個月的部分 
{ 
da.innerHTML="<b><font color=#BCBABC>" + meizzWDay[i] + "</font></b>"; 
da.title=(mm==12?1:mm+1) +"月" + meizzWDay[i] + "日"; 
da.onclick=Function("meizzDayClick(this.innerText,1)"); 
if(!outDate) 
da.style.backgroundColor = ((mm==12?yy+1:yy) == new Date().getFullYear() && 
(mm==12?1:mm+1) == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate()) ? 
"#5CEFA0":"#f5f5f5"; 
else 
{ 
da.style.backgroundColor =((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && 
meizzWDay[i]==outDate.getDate())? "#84C1FF" : 
(((mm==12?yy+1:yy) == new Date().getFullYear() && (mm==12?1:mm+1) == new Date().getMonth()+1 && 
meizzWDay[i] == new Date().getDate()) ? "#5CEFA0":"#f5f5f5"); 
//將選中的日期顯示為凹下去 
if((mm==12?yy+1:yy)==outDate.getFullYear() && (mm==12?1:mm+1)== outDate.getMonth() + 1 && 
meizzWDay[i]==outDate.getDate()) 
{ 
da.borderColorLight="#FFFFFF"; 
da.borderColorDark="#63A3E9"; 
} 
} 
} 
else //本月的部分 
{ 
da.innerHTML="<b>" + meizzWDay[i] + "</b>"; 
da.title=mm +"月" + meizzWDay[i] + "日"; 
da.onclick=Function("meizzDayClick(this.innerText,0)"); //給td賦予onclick事件的處理 
//如果是當前選擇的日期，則顯示亮藍色的背景；如果是當前日期，則顯示暗黃色背景 
if(!outDate) 
da.style.backgroundColor = (yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())? 
"#5CEFA0":"#f5f5f5"; 
else 
{ 
da.style.backgroundColor =(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate())? 
"#84C1FF":((yy == new Date().getFullYear() && mm == new Date().getMonth()+1 && meizzWDay[i] == new Date().getDate())? 
"#5CEFA0":"#f5f5f5"); 
//將選中的日期顯示為凹下去 
if(yy==outDate.getFullYear() && mm== outDate.getMonth() + 1 && meizzWDay[i]==outDate.getDate()) 
{ 
da.borderColorLight="#FFFFFF"; 
da.borderColorDark="#63A3E9"; 
} 
} 
} 
da.style.cursor="hand" 
} 
else { da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"; } 
} 
} 
function meizzDayClick(n,ex) //點擊顯示框選取日期，主輸入函數************* 
{ 
parent.meizzTheDate=n; 
var yy=meizzTheYear; 
var mm = parseInt(meizzTheMonth)+ex; //ex表示偏移量，用于選擇上個月份和下個月份的日期 
var hh=meizzTheHour; 
var mi=meizzTheMinute; 
var se=meizzTheSecond; 
//判斷月份，并進行對應的處理 
if(mm<1){ 
yy--; 
mm=12+mm; 
} 
else if(mm>12){ 
yy++; 
mm=mm-12; 
} 
if (mm < 10) {mm = "0" + mm;} 
if (hh<10) {hh="0" + hh;} //時 
if (mi<10) {mi="0" + mi;} //分 
if (se<10) {se="0" + se;} //秒 
if (outObject) 
{ 
if (!n) { //outObject.value=""; 
return;} 
if ( n < 10){n = "0" + n;} 
WriteDateTo(yy,mm,n,hh,mi,se); 
closeLayer(); 
if (bUseTime) 
{ 
try 
{ 
outButton.click(); 
} 
catch (e) 
{ 
setday(outObject); 
} 
} 
} 
else {closeLayer(); alert("您所要輸出的控件對象并不存在！");} 
} 
function format(n) //格式化數字為兩位字符表示 
{ 
var m=new String(); 
var tmp=new String(n); 
if (n<10 && tmp.length<2) 
{ 
m="0"+n; 
} 
else 
{ 
m=n; 
} 
return m; 
} 
function evaSetTime() //設置用戶選擇的小時、分鐘 
{ 
odatelayer.meizzHourHead.innerText=meizzTheHour+" 時"; 
odatelayer.meizzMinuteHead.innerText=meizzTheMinute+" 分"; 
odatelayer.meizzSecondHead.innerText=meizzTheSecond+" 秒"; 
WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond) 
} 
function evaSetTimeNothing() //設置時間控件為空 
{ 
odatelayer.meizzHourHead.innerText=""; 
odatelayer.meizzMinuteHead.innerText=""; 
odatelayer.meizzSecondHead.innerText=""; 
WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond) 
} 
function evaSetTimeNow() //設置時間控件為當前時間 
{ 
odatelayer.meizzHourHead.innerText=new Date().getHours()+" 時"; 
odatelayer.meizzMinuteHead.innerText=new Date().getMinutes()+" 分"; 
odatelayer.meizzSecondHead.innerText=new Date().getSeconds()+" 秒"; 
meizzTheHour = new Date().getHours(); 
meizzTheMinute = new Date().getMinutes(); 
meizzTheSecond = new Date().getSeconds(); 
WriteDateTo(meizzTheYear,meizzTheMonth,meizzTheDate,meizzTheHour,meizzTheMinute,meizzTheSecond) 
} 
function UseTime(ctl) 
{ 
bUseTime=!bUseTime; 
if (bUseTime) 
{ 
bImgSwitch(); 
ctl.innerHTML=bImg; 
evaSetTime(); //顯示時間，用戶原來選擇的時間 
//evaSetTimeNow(); //顯示當前時間 
} 
else 
{ 
bImgSwitch(); 
ctl.innerHTML=bImg; 
evaSetTimeNothing(); 
} 
} 
function WriteDateTo(yy,mm,n,hh,mi,se) 
{ 
if (bUseTime) 
{ 
outObject.value= yy + "-" + format(mm) + "-" + format(n) + " " + format(hh) + ":" + format(mi) + ":" + format(se); //注：在這里你可以</script></pre>輸出改成你想要的格式 
} 
else 
{ 
outObject.value= yy + "-" + format(mm) + "-" + format(n); //注：在這里你可以</script></pre>輸出改成你想要的格式 
} 
} 
function bImgSwitch() 
{ 
if (bUseTime) 
{ 
bImg="開啟"; 
} 
else 
{ 
bImg="關閉"; 
} 
} 
// --></ script> 
</head> 
<body> 
測試一，onfocus事件調用：<input type="text" name="txtDate1" readonly="readonly" onfocus="setday(this);" />測試二，onclick事件調用：<input type="text" name="txtDate2" readonly="readonly" /><input type="button" value="setday" onclick="setday(this,document.all.txtDate2);" /> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

一個寫得較好的JavaScript日期挑選控件_時間日期

推薦度：

點擊下載本文 文檔為doc格式

標簽：一個日期選擇

熱門焦點

一個寫得較好的JavaScript日期挑選控件_時間日期

一個寫得較好的JavaScript日期挑選控件_時間日期

一個寫得較好的JavaScript日期挑選控件_時間日期

最新推薦

猜你喜歡

熱門推薦